/*
 * Concept D — Noir
 *
 * The homepage redesign, ported from the Design canvas artboard.
 *
 * Everything here is scoped so the 300-odd inner pages keep the stylesheet they
 * already have. Two scopes:
 *
 *   .nx   site-wide chrome (header, footer, the shared atoms they use) plus the
 *         design tokens. Sits on <header>, <footer> and the home page wrapper.
 *   .nxh  the home page sections only. Always inside .nx.
 *
 * The scoping matters: .btn, .wrap, .tile, .sub, .rv, .wa, .ph, .acc, .sec,
 * .bento, .spec, .faq and .mq all already mean something else in style.css.
 *
 * The review section of the artboard is deliberately not ported. It is built on
 * invented testimonials and an invented star rating; social proof stays out
 * until there is something real to show.
 */

/* ---------------------------------------------------------------- tokens */

.nx {
	--ink: #0E0D0C;
	--ink-2: #161514;
	--ink-3: #1F1D1B;
	--ground: #F6F3EF;
	--white: #FFFFFF;
	--mute: #67635E;
	--mute-d: #A7A29C;
	/* Muted first line of two-tone headings and step numbers on inner pages. */
	--soft: #8A7E74;
	--line: rgba(14, 13, 12, .11);
	--line-d: rgba(255, 255, 255, .1);
	--accent: #D9773F;
	/* Page container. Identical to the designs (1320px) up to a 1440px screen;
	   above that the content keeps the designs' proportion (86% of the screen)
	   and stops growing at 1600px of content. */
	--wrap: max(1320px, calc(min(86vw, 1600px) + 80px));
	--ease: cubic-bezier(.2, .7, .2, 1);

	font-family: 'General Sans', 'Manrope', system-ui, sans-serif;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--ink);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.nx *,
.nx *::before,
.nx *::after { box-sizing: border-box }

.nx h1, .nx h2, .nx h3, .nx h4, .nx h6,
.nx p, .nx ul, .nx ol, .nx figure, .nx blockquote { margin: 0; padding: 0 }

.nx button, .nx input, .nx select { font: inherit; color: inherit }
/* style.css sets every p and li to line-height 1.8; Concept D lets them
   inherit the 1.6 set on .nx (or whatever the parent component sets). */
.nx :where(p, li) { line-height: inherit }
/* Inner-page designs set their root at 1.7; only the homepage runs at 1.6. */
body:not(.home) .nx { line-height: 1.7 }
/* style.css pads and borders every <footer>; the Concept D footers carry their own spacing. */
footer.nx { padding-top: 0; border-top: 0 }
.nx button { background: none; border: 0; cursor: pointer; padding: 0 }
.nx img { display: block; max-width: 100%; height: auto }
/* Card images (class "ph") fill and crop their frame, and ease in slightly on
   hover, as in every Concept D design. */
.nx .ph { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease) }
.nx .card-h:hover .ph { transform: scale(1.05) }
@media (prefers-reduced-motion: reduce) { .nx .card-h:hover .ph { transform: none } }
.nx a { color: inherit; text-decoration: none }
.nx :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px }

.nx .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 40px }
.nx .dk { background: var(--ink); color: #fff }

/* ------------------------------------------------------------ type system */

.nx .disp {
	font-family: 'Vocago', Georgia, serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1.1;
}
.nx .disp em { font-style: normal; color: #8A7E74 }
.nx .dk .disp em,
.nx.dk .disp em,
.nxh .feat .disp em { color: #A49D98 }

.nx .h2 { font-size: clamp(2rem, 3.3vw, 3.1rem) }

.nx .eyebrow {
	display: block;
	font-family: 'General Sans', sans-serif;
	font-weight: 500;
	font-size: 11.5px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: #6F655E;
}
.nx .dk .eyebrow,
.nx.dk .eyebrow,
.nxh .feat .eyebrow { color: var(--mute-d) }

.nx .sub {
	font-weight: 500;
	font-size: 17px;
	letter-spacing: .01em;
	line-height: 1.8;
	color: var(--mute);
	max-width: 520px;
}
.nx .dk .sub,
.nx.dk .sub,
.nxh .feat .sub { color: #B9B4AE }

.nx .mono,
.nxh .cr .n, .nxh .cr .c, .nxh .pd-f .t, .nxh .tile-c small,
.nxh .tk-rows, .nxh .tk-h span, .nxh .st .n, .nxh .st .tm,
.nxh .spec small, .nxh .toc a span, .nxh .toc .lbl,
.nx .ct small, .nx .links h6 {
	font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ------------------------------------------------------------------ atoms */

.nx .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 54px;
	padding: 0 28px;
	border-radius: 999px;
	border: 1px solid transparent;
	/* Legacy style.css gives every .btn a backdrop blur and a glass shadow.
	   Concept D buttons are solid, so both are cleared here. */
	-webkit-backdrop-filter: none; backdrop-filter: none;
	font-family: 'General Sans', sans-serif;
	font-weight: 500;
	font-size: 11.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.nx .btn:hover { transform: translateY(-1px) }
.nx .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round }
.nx .btn-acc { background: var(--accent); color: #fff }
.nx .btn-acc:hover { color: #fff; filter: brightness(1.08) }
.nx .btn-ink { background: var(--ink); color: #fff }
.nx .btn-ink:hover { color: #fff; background: #000 }
.nx .btn-ghost { border-color: rgba(255, 255, 255, .22); color: #fff; background: rgba(255, 255, 255, .04) }
.nx .btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff }
.nx .btn-line { border-color: var(--line); color: var(--ink); background: transparent }
.nx .btn-line:hover { border-color: var(--ink) }
.nx .btn-white { background: #fff; color: var(--ink) }
.nx .btn-white:hover { color: var(--ink) }

.nx .circ {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	transition: all .3s var(--ease);
	flex: none;
}
.nx .circ svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round }
.nx .card-h:hover .circ { background: var(--ink); color: #fff; border-color: var(--ink); transform: rotate(-45deg) }
.nx .dk .circ, .nx .circ-l { border-color: rgba(255, 255, 255, .2) }
.nx .dk .card-h:hover .circ,
.nx .card-h:hover .circ-l { background: #fff; color: var(--ink); border-color: #fff }

.nx .pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
}
.nx .glass {
	background: rgba(255, 255, 255, .07);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, .14);
	color: #fff;
}
.nx .lift { transition: transform .35s var(--ease), box-shadow .35s var(--ease) }
.nx .lift:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35) }
.nx .nx-ph { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease) }
.nx .card-h:hover .nx-ph { transform: scale(1.05) }

.nx .ghost {
	font-family: 'Vocago', Georgia, serif;
	font-weight: 400;
	letter-spacing: 0;
	line-height: .8;
	color: transparent;
	-webkit-text-stroke: 1px rgba(14, 13, 12, .16);
}
.nx .dk .ghost, .nx.dk .ghost { -webkit-text-stroke: 1px rgba(255, 255, 255, .18) }

/* ----------------------------------------------------------------- header */

.nx.hd { position: sticky; top: 14px; z-index: 50; margin: 14px 18px 0; color: #EFEAE6 }
.nx .bar {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 28px;
	min-height: 84px;
	padding: 0 14px 0 26px;
	border-radius: 20px;
	background: rgba(34, 28, 25, .94);
	border: 1px solid rgba(239, 234, 230, .12);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	box-shadow: 0 24px 50px -30px rgba(20, 14, 10, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.nx .hd-logo { display: flex; align-items: center; height: 58px; padding-right: 28px; border-right: 1px solid rgba(239, 234, 230, .14) }
.nx .hd-logo img { height: 56px; width: auto }

.nx .menu { display: flex; justify-content: center; gap: 4px; list-style: none; height: 84px }
.nx .menu > li { display: flex; align-items: center }
.nx .menu > li > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 16px;
	border-radius: 999px;
	font-family: 'General Sans', 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 11.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #CBC3BC;
	transition: color .25s, background .25s;
}
.nx .menu > li > a:hover,
.nx .menu > li:hover > a { color: #fff; background: rgba(255, 255, 255, .06) }
.nx .menu > li > a.cur::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 4px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 99px;
	background: var(--accent);
}
.nx .menu .car { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .3s }
.nx .has-mega:hover .car { transform: rotate(180deg) }

.nx .mega {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 10px);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) 1.15fr;
	gap: 36px;
	padding: 34px;
	border-radius: 20px;
	background: rgba(34, 28, 25, .97);
	border: 1px solid rgba(239, 234, 230, .12);
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: .3s var(--ease);
}
.nx .has-mega:hover .mega,
.nx .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none }
.nx .mega h6 {
	font-family: 'General Sans', sans-serif;
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: #8C8179;
	margin-bottom: 14px;
}
.nx .mega ul { list-style: none; display: grid; gap: 2px }
.nx .mega ul a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	margin: 0 -12px;
	border-radius: 12px;
	font-size: 15px;
	color: #E6E0DA;
	transition: background .2s;
}
.nx .mega ul a span { font-family: 'Geist Mono', monospace; font-size: 11px; color: #8C8179 }
.nx .mega ul a:hover { background: rgba(255, 255, 255, .06); color: #fff }
.nx .mega-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 8px;
	min-height: 250px;
	padding: 24px;
	border-radius: 16px;
	overflow: hidden;
	color: #fff;
}
.nx .mega-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.nx .mega-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .75));
	z-index: 1;
}
.nx .mega-card > * { position: relative; z-index: 2 }
.nx .mega-card small {
	font-family: 'General Sans', sans-serif;
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .75);
}
.nx .mega-card b { font-family: 'Vocago', Georgia, serif; font-weight: 400; font-size: 1.4rem; line-height: 1.2 }

.nx .hd-r { display: flex; align-items: center; gap: 12px }
.nx .tel {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding-right: 6px;
	font-family: 'General Sans', sans-serif;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .12em;
	color: #EFEAE6;
	white-space: nowrap;
}
.nx .tel svg { width: 15px; height: 15px; fill: none; stroke: #A49D98; stroke-width: 1.6 }
.nx .hd-ic {
	width: 46px;
	height: 46px;
	border-radius: 999px;
	border: 1px solid rgba(239, 234, 230, .16);
	background: rgba(0, 0, 0, .25);
	display: grid;
	place-items: center;
	transition: .25s;
}
.nx .hd-ic:hover { background: #EFEAE6; color: #221C19 }
.nx .hd-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round }
.nx .qbtn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	height: 52px;
	padding: 0 26px;
	border-radius: 999px;
	background: #A49D98;
	color: #221C19;
	font-family: 'General Sans', sans-serif;
	font-weight: 500;
	font-size: 11.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background .25s, color .25s;
}
.nx .qbtn:hover { background: #EFEAE6; color: #221C19 }
.nx .qbtn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .25s }
.nx .qbtn:hover svg { transform: translateX(3px) }
.nx .burger { display: none }

/* mobile drawer */
.nx .drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(14, 13, 12, .97);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	padding: 24px 22px 40px;
	overflow-y: auto;
	display: none;
	color: #EFEAE6;
}
.nx .drawer.open { display: block }
.nx .drawer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px }
.nx .drawer-top img { height: 48px; width: auto }
.nx .drawer nav ul { list-style: none; display: grid; gap: 2px }
.nx .drawer nav > ul > li > a {
	display: block;
	padding: 15px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	font-family: 'Vocago', Georgia, serif;
	font-size: 1.35rem;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.nx .drawer .sub-list { padding: 6px 0 14px; display: grid; gap: 0 }
.nx .drawer .sub-list a { display: block; padding: 9px 0; font-size: 14.5px; color: #BEB9B3 }
.nx .drawer .drawer-cta { display: grid; gap: 10px; margin-top: 26px }
.nx .drawer .btn { width: 100% }

/* ------------------------------------------------------------------- hero */

.nxh .hero {
	position: relative;
	overflow: hidden;
	background: var(--ground);
	color: #1E1916;
	text-align: center;
	padding-top: 48px;
	/* Room under the product image before the marquee band. */
	padding-bottom: clamp(32px, 4vw, 64px);
}
.nxh .hero-copy { max-width: 960px; margin: 0 auto; padding: 0 24px }
.nxh .hero-eb {
	font-family: 'General Sans', sans-serif;
	font-weight: 500;
	font-size: 11.5px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: #6F655E;
}
.nxh .hero-h1 {
	display: grid;
	gap: 4px;
	margin: 22px 0 0;
	font-family: 'Vocago', Georgia, serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1.08;
	font-size: clamp(2.2rem, 4.1vw, 3.7rem);
}
.nxh .hero-h1 .soft { color: #8A7E74 }
.nxh .hero-h1 .strong { color: #1E1916 }
.nxh .hero-sub {
	/* Body face, like every other intro paragraph; the display face is kept for headings. */
	font-family: 'General Sans', 'Manrope', system-ui, sans-serif;
	font-weight: 500;
	font-size: clamp(1rem, 1.25vw, 1.15rem);
	letter-spacing: .01em;
	line-height: 1.7;
	color: var(--mute);
	max-width: 46ch;
	margin: 22px auto 0;
}
.nxh .hero-cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 32px }
.nxh .hbtn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	height: 58px;
	padding: 0 32px;
	border-radius: 999px;
	font-family: 'General Sans', sans-serif;
	font-weight: 500;
	font-size: 11.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	transition: transform .25s, background .25s, color .25s, box-shadow .25s;
}
.nxh .hbtn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8 }
.nxh .hbtn:hover { transform: translateY(-1px) }
.nxh .hbtn-dark { background: #221B18; color: #fff; box-shadow: 0 14px 30px -16px rgba(34, 27, 24, .6) }
.nxh .hbtn-dark:hover { color: #fff; background: #000 }
.nxh .hbtn-light { background: #FBFAF7; color: #221B18; border: 1px solid rgba(34, 27, 24, .1) }
.nxh .hbtn-light:hover { color: #221B18; border-color: rgba(34, 27, 24, .3) }

.nxh .hero-plate { width: min(1400px, calc(100% - 48px)); aspect-ratio: 2581 / 798; margin: 0 auto }
.nxh .hero-plate img { width: 100%; height: 100%; object-fit: contain; animation: nx-hp-rise 1.4s var(--ease) both }
@keyframes nx-hp-rise { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }


/* --------------------------------------------------------------- sections */

.nx .sec { padding: 120px 0 }
.nx .sec.pt0 { padding-top: 0 }
.nx .head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	margin-bottom: 56px;
	flex-wrap: wrap;
}
.nx .head-l { display: flex; flex-direction: column; gap: 18px }

/* marquee */
.nxh .mq { background: var(--ink); color: #fff; overflow: hidden; padding: 26px 0; border-top: 1px solid var(--line-d) }
.nxh .mq-track { display: flex; width: max-content; animation: nx-mq 60s linear infinite }
.nxh .mq-g { display: flex; align-items: center; gap: 40px; padding-right: 40px }
.nxh .mq-g span {
	font-family: 'Vocago', Georgia, serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: 30px;
	white-space: nowrap;
}
.nxh .mq-g span.i { color: #8A7E74 }
.nxh .mq-g b { width: 8px; height: 8px; border-radius: 99px; background: var(--accent); flex: none }
@keyframes nx-mq { to { transform: translateX(-50%) } }
.nxh .mq:hover .mq-track { animation-play-state: paused }

/* 01 — categories */
.nxh .cat { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: start }
.nxh .cl { list-style: none; border-top: 1px solid var(--line) }
.nxh .cr a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 44px;
	align-items: center;
	gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
	transition: padding .35s var(--ease);
}
.nxh .cr .n { font-size: 12px; color: var(--mute) }
.nxh .cr .t {
	font-family: 'Vocago', Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.4rem, 2.1vw, 1.85rem);
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1.1;
	transition: color .3s;
}
.nxh .cr .t small { display: none }
.nxh .cr .c { font-size: 12px; color: var(--mute); white-space: nowrap }
.nxh .cr .th { display: none }
.nxh .cr.on a { padding-left: 14px }
.nxh .cr.on .t { color: var(--accent) }
.nxh .cr.on .circ { background: var(--ink); color: #fff; border-color: var(--ink); transform: rotate(-45deg) }

.nxh .cv { position: sticky; top: 120px; border-radius: 28px; overflow: hidden; background: var(--ink); color: #fff }
.nxh .cv-img { position: relative; aspect-ratio: 4 / 4.2 }
.nxh .cv-img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity .6s var(--ease), transform 1.2s var(--ease);
}
.nxh .cv-img img.on { opacity: 1; transform: none }
.nxh .cv-b { padding: 26px 28px 30px }
.nxh .cv-b h3 { font-family: 'Vocago', Georgia, serif; font-weight: 400; font-size: 1.6rem; text-transform: uppercase; letter-spacing: .01em }
.nxh .cv-b p { font-size: 14.5px; color: #B9B4AE; margin-top: 8px; line-height: 1.6 }
.nxh .cv-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px }
.nxh .cv-subs span { font-size: 12.5px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #E6E2DD }

/* 02 — products */
.nxh .tabsw { display: flex; gap: 4px; padding: 4px; background: var(--ink); border-radius: 999px }
.nxh .tb {
	min-height: 42px;
	padding: 0 18px;
	border-radius: 999px;
	font-family: 'General Sans', sans-serif;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: .06em;
	color: #B9B4AE;
	transition: all .2s ease;
}
.nxh .tb.on { background: #fff; color: var(--ink) }
.nxh .g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px }
.nxh .pd {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid rgba(14, 13, 12, .06);
}
.nxh .pd.hide { display: none }
.nxh .pd-img { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #E7E5E1 }
.nxh .pd-tag {
	position: absolute;
	left: 14px;
	top: 14px;
	height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	background: #fff;
	color: var(--ink);
}
.nxh .pd-tag.acc { background: var(--accent); color: #fff }
.nxh .pd-b { padding: 20px 20px 0; display: flex; flex-direction: column; gap: 6px; flex: 1 }
.nxh .pd-b h3 { font-family: 'General Sans', sans-serif; font-weight: 500; font-size: 1.25rem; letter-spacing: 0; line-height: 1.2 }
.nxh .pd-b p { font-size: 14px; color: var(--mute) }
.nxh .pd-f { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 20px }
.nxh .pd-f .t { font-size: 12px; color: var(--mute); letter-spacing: .04em }

/* 03 — vehicle feature */
.nxh .feat { position: relative; overflow: hidden; color: #fff; background: var(--ink) }
.nxh .feat > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50% }
.nxh .feat-sh {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #0E0D0C 0%, rgba(14, 13, 12, .82) 36%, rgba(14, 13, 12, .1) 72%);
}
.nxh .feat .wrap {
	position: relative;
	padding-top: 140px;
	padding-bottom: 120px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 40px;
	align-items: end;
	min-height: 820px;
}
.nxh .feat-l { display: flex; flex-direction: column; gap: 26px; max-width: 620px }
.nxh .feat .pills { display: flex; flex-wrap: wrap; gap: 10px }
.nxh .thumbs { display: flex; gap: 12px }
.nxh .thumbs a { width: 168px; border-radius: 18px; overflow: hidden; background: rgba(20, 19, 18, .6) }
.nxh .thumbs img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover }
.nxh .thumbs span { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; font-size: 13px; font-weight: 500 }
.nxh .cta { display: flex; gap: 12px; flex-wrap: wrap }

/* 04 — exhibitions bento */
.nxh .bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 300px); gap: 16px }
.nxh .b-tile { position: relative; border-radius: 24px; overflow: hidden; color: #fff; background: #222 }
.nxh .b-tile:hover { color: #fff }
.nxh .b-tile.big { grid-column: span 2; grid-row: span 2 }
.nxh .b-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .72)) }
.nxh .b-tile img { position: absolute; inset: 0 }
.nxh .tile-c {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 22px;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px;
}
.nxh .tile-c small {
	display: block;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .75);
	margin-bottom: 6px;
}
.nxh .tile-c b { font-family: 'General Sans', sans-serif; font-weight: 500; font-size: 1.4rem; line-height: 1.1 }
.nxh .b-tile.big .tile-c b {
	font-family: 'Vocago', Georgia, serif;
	font-weight: 400;
	font-size: 2.4rem;
	letter-spacing: .005em;
}
.nxh .venues { display: flex; flex-wrap: wrap; gap: 8px }
.nxh .venues span {
	height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid var(--line);
	display: inline-flex;
	align-items: center;
	font-size: 13.5px;
	font-weight: 500;
}

/* 05 — one quote / job ticket */
.nxh .g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center }
.nxh .tk {
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
	background: #F7F6F2;
	color: var(--ink);
	border-radius: 8px;
	padding: 36px 34px 30px;
	transform: rotate(-1.6deg);
	box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .75);
	position: relative;
}
.nxh .tk::before,
.nxh .tk::after { content: ""; position: absolute; top: 118px; width: 26px; height: 26px; border-radius: 99px; background: var(--ink) }
.nxh .tk::before { left: -13px }
.nxh .tk::after { right: -13px }
.nxh .tk-h { text-align: center; display: flex; flex-direction: column; gap: 6px; padding-bottom: 22px; border-bottom: 1px dashed rgba(14, 13, 12, .3) }
.nxh .tk-h b {
	font-family: 'Vocago', Georgia, serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 22px;
}
.nxh .tk-h b i { color: var(--accent); font-style: normal }
.nxh .tk-h span { font-size: 11px; letter-spacing: .14em; color: #5F5B56 }
.nxh .tk-rows { font-size: 13.5px }
.nxh .tk-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dotted rgba(14, 13, 12, .22) }
.nxh .tk-rows em { font-style: normal; color: #1D7A46; font-weight: 600 }
.nxh .tk-tot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px }
.nxh .tk-tot b { font-family: 'General Sans', sans-serif; font-weight: 500; font-size: 24px; letter-spacing: 0 }
.nxh .tk-tot span { font-family: 'Geist Mono', monospace; font-weight: 600; font-size: 16px }
.nxh .tk-bar { display: flex; justify-content: center; gap: 2px; padding-top: 22px; height: 56px }
.nxh .tk-bar i { display: block; background: var(--ink) }

/* 06 — process */
.nxh .road { position: relative }
.nxh .road::before { content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 4px; background: var(--ink); border-radius: 4px }
.nxh .road::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 22.5px;
	height: 1px;
	background-image: repeating-linear-gradient(90deg, var(--ground) 0 14px, transparent 14px 28px);
}
.nxh .road .g4 { gap: 32px; position: relative; z-index: 1 }
.nxh .st { display: flex; flex-direction: column; gap: 16px }
.nxh .st .n {
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	border: 4px solid var(--ground);
}
.nxh .st .n.acc { background: var(--accent) }
.nxh .st .tm { font-size: 12px; letter-spacing: .14em; color: var(--mute); text-transform: uppercase }
.nxh .st h3 {
	font-family: 'Vocago', Georgia, serif;
	font-weight: 400;
	font-size: 1.65rem;
	letter-spacing: .005em;
	line-height: 1.05;
}
.nxh .st p { font-size: 15px; color: var(--mute); line-height: 1.6 }
.nxh .big-n {
	font-family: 'Vocago', Georgia, serif;
	font-weight: 400;
	font-size: 120px;
	letter-spacing: 0;
	line-height: .8;
	color: var(--accent);
}
.nxh .big-n span {
	font-family: 'Vocago', Georgia, serif;
	text-transform: uppercase;
	font-size: 34px;
	color: #8A7E74;
	letter-spacing: .02em;
}

/* 07 — gifts */
.nxh .occ { display: flex; flex-wrap: wrap; gap: 8px; margin: -16px 0 28px }
.nxh .occ-b {
	height: 42px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1px solid var(--line);
	font-family: 'General Sans', sans-serif;
	font-weight: 500;
	font-size: 13px;
	color: var(--mute);
	transition: all .2s;
}
.nxh .occ-b:hover { border-color: var(--ink); color: var(--ink) }
.nxh .occ-b.on { background: var(--ink); border-color: var(--ink); color: #fff }
.nxh .gift { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px }
.nxh .gift-hero {
	position: relative;
	min-height: 640px;
	border-radius: 24px;
	overflow: hidden;
	color: #fff;
	display: flex;
	align-items: flex-end;
}
.nxh .gift-hero:hover { color: #fff }
.nxh .gift-hero img { position: absolute; inset: 0 }
.nxh .gift-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14, 13, 12, 0) 35%, rgba(14, 13, 12, .82));
}
.nxh .gift-hero-c {
	position: relative;
	z-index: 2;
	padding: 36px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	max-width: 520px;
}
.nxh .gift-hero-c small {
	font-family: 'General Sans', sans-serif;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .75);
}
.nxh .gift-hero-c b {
	font-family: 'Vocago', Georgia, serif;
	font-weight: 400;
	font-size: 2.2rem;
	line-height: 1.12;
	text-transform: uppercase;
	letter-spacing: .01em;
}
.nxh .gift-hero-c p { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .8); margin-bottom: 10px }
.nxh .gift-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px }
.nxh .gp {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid rgba(14, 13, 12, .06);
}
.nxh .gp-img { aspect-ratio: 4 / 3.1; overflow: hidden; background: #E7E5E1 }
.nxh .gp-b { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px }
.nxh .gp-b h3 { font-family: 'General Sans', sans-serif; font-weight: 500; font-size: 15.5px; line-height: 1.3; letter-spacing: 0 }
.nxh .gp-b p { font-size: 13px; color: var(--mute); margin-top: 3px }
.nxh .gift-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 20px; border-radius: 22px; background: var(--ink); color: #fff }
.nxh .gift-strip div { padding: 24px 26px; display: flex; flex-direction: column; gap: 4px }
.nxh .gift-strip div + div { border-left: 1px solid var(--line-d) }
.nxh .gift-strip b { font-weight: 500; font-size: 15px }
.nxh .gift-strip span { font-size: 13px; color: var(--mute-d) }

/* 08 — industries */
.nxh .g6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px }
.nxh .ind {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	border-radius: 18px;
	background: var(--white);
	border: 1px solid rgba(14, 13, 12, .06);
	transition: border-color .2s;
}
.nxh .ind:hover { border-color: var(--ink) }
.nxh .ind b { font-family: 'General Sans', sans-serif; font-weight: 500; font-size: 15px; letter-spacing: 0 }
.nxh .ind span { font-size: 13px; color: var(--mute); line-height: 1.45 }

/* 09 — guide */
.nxh .g-guide { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 80px; align-items: start }
.nxh .toc {
	position: sticky;
	top: 120px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 22px;
	border-radius: 22px;
	background: var(--ink-2);
	border: 1px solid var(--line-d);
}
.nxh .toc .lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute-d); margin-bottom: 10px }
.nxh .toc a { display: flex; gap: 12px; padding: 10px 0; font-size: 14.5px; color: #B9B4AE; border-bottom: 1px solid var(--line-d); transition: color .2s }
.nxh .toc a:last-child { border-bottom: 0 }
.nxh .toc a:hover { color: #fff }
.nxh .toc a span { font-size: 12px; color: #6F6A64 }
.nxh .art { display: flex; flex-direction: column; gap: 22px; padding-bottom: 56px; margin-bottom: 56px; border-bottom: 1px solid var(--line-d) }
.nxh .art:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0 }
.nxh .art-h { display: flex; align-items: flex-end; gap: 20px }
.nxh .art-h .ghost { font-size: 96px }
.nxh .art-h h3 {
	font-family: 'Vocago', Georgia, serif;
	font-weight: 400;
	font-size: 2rem;
	line-height: 1.15;
	letter-spacing: .005em;
}
.nxh .art p { font-size: 16.5px; line-height: 1.8; color: #C4BFB9; max-width: 760px }
.nxh .il {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .35);
	text-underline-offset: 4px;
	transition: text-decoration-color .2s;
}
.nxh .il:hover { color: #fff; text-decoration-color: #fff }
.nxh .specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.nxh .nx-spec {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px;
	border-radius: 18px;
	background: var(--ink-2);
	border: 1px solid var(--line-d);
	transition: border-color .2s;
}
.nxh .nx-spec:hover { border-color: rgba(255, 255, 255, .3); color: #fff }
.nxh .nx-spec small { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .14em; color: #7D7872; text-transform: uppercase }
.nxh .nx-spec b { font-family: 'General Sans', sans-serif; font-weight: 500; font-size: 1.1rem; letter-spacing: 0 }
.nxh .nx-spec span { font-size: 14px; color: var(--mute-d); line-height: 1.5 }
.nxh .locs { display: flex; flex-wrap: wrap; gap: 8px }
.nxh .locs a {
	height: 38px;
	padding: 0 15px;
	border-radius: 999px;
	border: 1px solid var(--line-d);
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	color: #E1DDD8;
	transition: .2s;
}
.nxh .locs a:hover { background: #fff; color: var(--ink) }

/* 10 — faq */
.nxh .nx-faq { background: var(--white) }
.nxh .g-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 80px; align-items: start }
/*
 * Accordion. Scoped to .nx, not .nxh, because every inner page uses it too;
 * scoped to the homepage it left the services FAQ permanently expanded.
 * Both .nx-acc (homepage markup) and .acc (design markup) are accepted.
 */
.nx .nx-acc, .nx .acc { border-top: 1px solid var(--line) }
.nx .ai { border-bottom: 1px solid var(--line) }
.nx .ab { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; text-align: left; background: none; border: 0; cursor: pointer }
.nx .ab h3 { font-family: 'General Sans', sans-serif; font-weight: 500; font-size: 1.1rem; letter-spacing: 0; line-height: 1.35 }
.nx .ab .circ { width: 38px; height: 38px }
.nx .ai.open .ab .circ { background: var(--ink); color: #fff; border-color: var(--ink); transform: rotate(45deg) }
.nx .ap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease) }
.nx .ap > div { overflow: hidden }
.nx .ap p { font-size: 15.5px; line-height: 1.75; color: var(--mute); padding-bottom: 24px; max-width: 64ch }
.nx .ai.open .ap { grid-template-rows: 1fr }
.nxh .ask { margin-top: 32px; padding: 26px; border-radius: 22px; background: var(--ink); color: #fff; display: flex; flex-direction: column; gap: 12px }
.nxh .ask b { font-family: 'Vocago', Georgia, serif; font-weight: 400; font-size: 1.3rem; letter-spacing: .005em }
.nxh .ask p { font-size: 14.5px; color: #B9B4AE }

/* ----------------------------------------------------------------- footer */

.nx.fin {
	background-color: var(--ink);
	background-size: cover;
	background-position: center;
	color: #fff;
}
.nx .fin-top { padding: 150px 0 72px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px }
/* Wide enough for the closing line to sit on two lines, not a narrow stack. */
.nx .fin-top .h2 { max-width: 40ch; text-wrap: balance }
.nx .fin-top .cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center }
.nx .contacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-bottom: 88px }
.nx .ct { display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 22px }
.nx .ct:hover { color: #fff; border-color: rgba(255, 255, 255, .3) }
.nx .ct-top { display: flex; justify-content: space-between; align-items: center }
.nx .ct small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute-d) }
.nx .ct b { font-family: 'General Sans', sans-serif; font-weight: 500; font-size: 1.5rem; letter-spacing: 0; overflow-wrap: anywhere }
.nx .ct span { font-size: 14px; color: #B9B4AE }
.nx .links { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 40px; padding: 64px 0; border-top: 1px solid var(--line-d) }
.nx .links img { height: 84px; width: auto; margin-bottom: 20px }
.nx .links p { font-size: 14px; color: var(--mute-d); line-height: 1.75; max-width: 32ch }
.nx .links h6 { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #7D7872; margin-bottom: 18px }
.nx .links ul { list-style: none; display: grid; gap: 4px }
.nx .flink { display: inline-flex; align-items: center; padding: 6px 0; font-size: 14.5px; color: #BEB9B3; transition: color .2s }
.nx .flink:hover { color: #fff }
.nx .wordmark {
	font-family: 'Vocago', Georgia, serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: clamp(56px, 12.5vw, 190px);
	line-height: .95;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .16);
	padding-top: 8px;
}
.nx .wordmark span { -webkit-text-stroke: 0; color: var(--accent) }
.nx .bot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 26px 0 34px;
	border-top: 1px solid var(--line-d);
	font-size: 13px;
	color: #8E8983;
}
.nx .bot div { display: flex; gap: 22px }
.nx .bot a:hover { color: #fff }

/* floating WhatsApp — nx-wa, because .wa already means something in style.css */
/* Inner pages run a lighter footer than the homepage: plain glass contact
   cards with no arrow, sans labels, and a little less air above the headline. */
.nx.fin:not(.fin-home) .fin-top { padding-top: 140px }
.nx.fin:not(.fin-home) .ct {
	gap: 12px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.nx.fin:not(.fin-home) .ct small { font-family: 'General Sans', sans-serif; font-size: 10.5px; letter-spacing: .24em }
.nx.fin:not(.fin-home) .ct b { font-size: 1.25rem }
.nx.fin:not(.fin-home) .links h6 { font-family: 'General Sans', sans-serif; font-size: 10.5px; letter-spacing: .24em; margin-bottom: 16px }
.nx.fin:not(.fin-home) .flink { padding: 5px 0 }

/* Compact footers: contact, FAQs and policies (wordmark + one row), and the
   quote page (logo + one row), where the page itself is the call to action. */
.nx.mini-f { background: var(--ink); color: #8E8983; font-size: 13px }
.nx.mini-f a:hover { color: #fff }
.nx.mini-f nav { display: flex; gap: 22px; flex-wrap: wrap }
.nx.mini-f .row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap }
.nx.mini-f-mini .wordmark { padding-top: 60px }
.nx.mini-f-mini .row { padding-top: 28px; padding-bottom: 34px; border-top: 1px solid var(--line-d) }
.nx.mini-f-slim .row { padding-top: 30px; padding-bottom: 30px }
.nx.mini-f-slim img { height: 52px; width: auto }

.nx-wa {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 54px;
	padding: 0 20px 0 16px;
	border-radius: 999px;
	background: #fff;
	color: #0E0D0C;
	font-family: 'General Sans', sans-serif;
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
	box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .5);
	transition: transform .2s;
}
.nx-wa:hover { transform: translateY(-2px); color: #0E0D0C }
.nx-wa i { width: 30px; height: 30px; border-radius: 99px; background: #25A35A; display: grid; place-items: center; color: #fff }
.nx-wa svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8 }

/* ----------------------------------------------------------------- motion */

@keyframes nx-up-in { from { opacity: 0; transform: translateY(28px); filter: blur(8px) } to { opacity: 1; transform: none; filter: none } }
@keyframes nx-bar-in { from { opacity: 0; transform: translateY(-24px) scale(.98) } to { opacity: 1; transform: none } }

.nx .bar { animation: nx-bar-in 1s var(--ease) both }
.nxh .hero-eb { animation: nx-up-in 1s var(--ease) .15s both }
.nxh .hero-h1 .soft { animation: nx-up-in 1.1s var(--ease) .25s both }
.nxh .hero-h1 .strong { animation: nx-up-in 1.1s var(--ease) .4s both }
.nxh .hero-sub { animation: nx-up-in 1s var(--ease) .55s both }
.nxh .hero-cta { animation: nx-up-in 1s var(--ease) .7s both }
.nxh .hero-plate img { animation-delay: .6s; animation-duration: 1.6s }

.nxh .hbtn-dark, .nx .qbtn, .nx .btn-acc, .nx .btn-white, .nx .btn-ink {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.nxh .hbtn-dark::after, .nx .qbtn::after, .nx .btn-acc::after, .nx .btn-white::after, .nx .btn-ink::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform .9s var(--ease);
}
.nxh .hbtn-dark:hover::after, .nx .qbtn:hover::after, .nx .btn-acc:hover::after,
.nx .btn-white:hover::after, .nx .btn-ink:hover::after { transform: translateX(120%) }

/*
 * Scroll-driven reveals. Progressive enhancement: browsers without
 * animation-timeline simply show everything, which is the correct fallback.
 */
@supports (animation-timeline: view()) {
	@keyframes nx-sv-up { from { opacity: 0; transform: translateY(56px) } to { opacity: 1; transform: none } }
	@keyframes nx-sv-clip { from { clip-path: inset(14% 8% 14% 8% round 28px); opacity: .2 } to { clip-path: inset(0 0 0 0 round 24px); opacity: 1 } }
	@keyframes nx-sv-par { from { transform: scale(1.18) translateY(-5%) } to { transform: scale(1.18) translateY(5%) } }
	@keyframes nx-sv-plate { to { transform: translateY(60px) scale(.95); opacity: .55 } }
	@keyframes nx-sv-word { from { letter-spacing: .24em; opacity: 0 } to { letter-spacing: .02em; opacity: 1 } }
	@keyframes nx-sv-pop { from { opacity: 0; transform: scale(.7) } to { opacity: 1; transform: none } }
	@keyframes nx-sv-road { from { transform: scaleX(0) } to { transform: scaleX(1) } }

	.nx .head, .nxh .g4 > *, .nxh .gift-grid > *, .nxh .cl > li, .nxh .st, .nxh .ind,
	.nxh .art, .nxh .ai, .nxh .gift-strip, .nxh .cv, .nxh .tk, .nxh .occ, .nxh .feat-l,
	.nxh .thumbs a, .nxh .g-faq > div:first-child,
	.nx .contacts > *, .nx .links > div, .nx .fin-top {
		animation: nx-sv-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 55%;
	}
	.nxh .g4 > *:nth-child(4n+2), .nxh .gift-grid > *:nth-child(2n),
	.nxh .g6 > *:nth-child(6n+2), .nx .contacts > *:nth-child(2),
	.nxh .thumbs a:nth-child(2) { animation-range: entry 8% entry 63% }
	.nxh .g4 > *:nth-child(4n+3), .nxh .g6 > *:nth-child(6n+3),
	.nx .contacts > *:nth-child(3), .nxh .thumbs a:nth-child(3) { animation-range: entry 16% entry 71% }
	.nxh .g4 > *:nth-child(4n+4), .nxh .g6 > *:nth-child(6n+4) { animation-range: entry 24% entry 79% }
	.nxh .g6 > *:nth-child(6n+5) { animation-range: entry 32% entry 87% }
	.nxh .g6 > *:nth-child(6n) { animation-range: entry 40% entry 95% }

	.nxh .b-tile, .nxh .gift-hero {
		animation: nx-sv-clip linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 70%;
	}
	.nxh .bento > *:nth-child(2), .nxh .bento > *:nth-child(4) { animation-range: entry 10% entry 80% }
	.nxh .bento > *:nth-child(3), .nxh .bento > *:nth-child(5) { animation-range: entry 20% entry 90% }

	.nxh .feat > img { animation: nx-sv-par linear both; animation-timeline: view(); animation-range: cover 0% cover 100% }
	.nxh .hero-plate { animation: nx-sv-plate linear both; animation-timeline: scroll(root); animation-range: 0 700px }
	.nx .wordmark { animation: nx-sv-word linear both; animation-timeline: view(); animation-range: entry 0% cover 45% }
	.nxh .big-n { animation: nx-sv-pop linear both; animation-timeline: view(); animation-range: entry 10% entry 70% }
	.nxh .road::before { transform-origin: left; animation: nx-sv-road linear both; animation-timeline: view(); animation-range: entry 20% cover 50% }
}

@media (prefers-reduced-motion: reduce) {
	.nx *, .nx *::before, .nx *::after,
	.nxh *, .nxh *::before, .nxh *::after { animation: none !important; transition: none !important }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
	.nx .menu, .nx .tel { display: none }
	.nx .burger { display: grid }
	.nx .bar { grid-template-columns: auto 1fr; min-height: 72px }
	.nx .hd-r { justify-self: end }
	.nx .hd-logo img { height: 46px }

	.nxh .cat, .nxh .g2, .nxh .g-guide, .nxh .g-faq, .nxh .feat .wrap { grid-template-columns: minmax(0, 1fr) }
	.nxh .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
	.nxh .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
	.nxh .cv { display: none }
	.nxh .cr a { grid-template-columns: 72px minmax(0, 1fr) 44px }
	.nxh .cr .n, .nxh .cr .c { display: none }
	.nxh .cr .th { display: block; width: 72px; height: 72px; border-radius: 14px; overflow: hidden }
	.nxh .cr .th img { width: 100%; height: 100%; object-fit: cover }
	.nxh .cr .t small {
		display: block;
		font-family: 'Geist Mono', monospace;
		font-weight: 400;
		font-size: 12px;
		letter-spacing: 0;
		text-transform: none;
		color: var(--mute);
		margin-top: 6px;
		line-height: 1.45;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.nxh .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 240px }
	.nxh .b-tile.big { grid-column: span 2; grid-row: span 1 }
	.nxh .road::before, .nxh .road::after { display: none }
	.nxh .toc { position: relative; top: 0 }
	.nxh .feat-sh { background: linear-gradient(0deg, #0E0D0C 0%, rgba(14, 13, 12, .75) 55%, rgba(14, 13, 12, .2)) }
	.nxh .gift { grid-template-columns: minmax(0, 1fr) }
	.nxh .gift-hero { min-height: 440px }
	.nxh .gift-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) }
	.nxh .gift-strip div:nth-child(3) { border-left: 0 }

	.nx .links { grid-template-columns: repeat(2, minmax(0, 1fr)) }
	.nx .links > div:first-child { grid-column: 1 / -1 }
}

@media (max-width: 760px) {
	.nx .wrap { padding: 0 20px }
	.nx.hd { margin: 10px 10px 0; top: 10px }
	.nx .qbtn { display: none }
	.nx .hd-logo { border-right: 0; padding-right: 0 }

	.nxh .hero-plate { width: 100% }
	.nxh .hbtn { flex: 1; justify-content: center; padding: 0 20px }
	.nx .sec { padding: 80px 0 }
	.nxh .g4, .nxh .specs { grid-template-columns: minmax(0, 1fr) }
	.nxh .g6 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
	.nxh .tabsw { overflow-x: auto; max-width: 100%; border-radius: 16px }
	.nxh .tb { flex: none }
	.nxh .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 260px }
	.nxh .b-tile.big { grid-column: span 1 }
	.nxh .b-tile.big .tile-c b { font-size: 1.6rem }
	.nxh .thumbs a { width: calc(33.3% - 8px) }
	.nxh .thumbs span { font-size: 11px; padding: 8px }
	.nxh .big-n { font-size: 88px }
	.nxh .art-h .ghost { font-size: 64px }
	.nxh .gift-grid { grid-template-columns: minmax(0, 1fr) }
	.nxh .gift-strip { grid-template-columns: minmax(0, 1fr) }
	.nxh .gift-strip div + div { border-left: 0; border-top: 1px solid var(--line-d) }
	.nxh .gift-hero-c b { font-size: 1.6rem }
	.nxh .mq-g span { font-size: 22px }

	.nx .contacts { grid-template-columns: minmax(0, 1fr) }
	.nx .links { grid-template-columns: minmax(0, 1fr) }
	.nx .bot { flex-direction: column; align-items: flex-start }
	.nx-wa span { display: none }
	.nx-wa { padding: 0 12px }
}

/* ------------------------------------------------- contrast corrections */

/*
 * The artboard's accent (#D9773F) is a decorative orange: it carries 3.15:1
 * against white and 2.92:1 as text on cream, so it fails WCAG AA wherever it
 * holds type. Rather than shift the whole palette we split it in two —
 *
 *   --accent      the bright original, for fills that carry no text:
 *                 the scroll pulse, the marquee dots, the wordmark stop.
 *   --accent-ink  a darker tone of the same hue, for anything with text on it
 *                 or made of text. 5.4:1 on white, 4.9:1 on the page ground.
 *
 * Both read as the same colour at a glance; only the type-bearing one is
 * darkened enough to be legible.
 */
.nx { --accent-ink: #A8511F }

.nx .btn-acc { background: var(--accent-ink) }
.nxh .pd-tag.acc { background: var(--accent-ink) }
.nxh .st .n.acc { background: var(--accent-ink) }
.nxh .cr.on .t { color: var(--accent-ink) }
.nxh .tk-h b i { color: var(--accent-ink) }

/* Small labels on the near-black grounds were between 3.4:1 and 4.4:1. */
.nxh .toc a span { color: #8C8780 }
.nxh .nx-spec small { color: #8C8780 }
.nx .links h6 { color: #8C8780 }
.nx .mega h6,
.nx .mega ul a span { color: #A39C94 }

/*
 * The footer is a dark section but carries .fin rather than .dk, so it never
 * picked up the light-on-dark eyebrow and sub colours — the eyebrow was landing
 * at 3.42:1. Give .fin the same treatment the other dark sections get.
 */
.nx.fin .eyebrow { color: var(--mute-d) }
.nx.fin .sub { color: #B9B4AE }

/*
 * Each gift occasion is wrapped in its own panel so it can be swapped, which
 * makes the panel the flex item rather than the <small>/<b>/<p> inside it.
 * Those are inline elements, so without this they run together on one line.
 */
.nxh .gift-hero-c [data-occ-panel] {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.nxh .gift-hero-c [data-occ-panel][hidden] { display: none }

/*
 * The desktop menu lives in a <nav> landmark, which the artboard did not have —
 * it put the <ul> straight into the bar. Hiding only .menu therefore left an
 * empty <nav> occupying the middle grid column, which pushed the controls onto
 * a second row and made the mobile bar almost twice as tall. Hide the wrapper.
 */
@media (max-width: 1080px) {
	.nx .bar > nav { display: none }
}

/* =========================================================================
 * Inner page hero — shared by every non-home Concept D page.
 * Scoped to .nx so it inherits the tokens and cannot reach legacy markup.
 * ===================================================================== */
.nx .phero { padding: 56px 0 80px }
.nx .crumb {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--mute);
}
.nx .crumb a:hover { color: var(--ink) }
.nx .crumb i { width: 4px; height: 4px; border-radius: 99px; background: #B8AEA6 }
.nx .crumb b { font-weight: 500; color: var(--ink) }
.nx .ph-h1 {
	font-family: 'Vocago', Georgia, serif; font-weight: 400; text-transform: uppercase;
	letter-spacing: .01em; line-height: 1.08; font-size: clamp(2.4rem, 4.6vw, 4.2rem);
	display: grid; gap: 4px;
}
.nx .ph-h1 .soft { color: var(--soft) }
.nxp-svc .ph-h1 { font-size: clamp(2.1rem, 3.5vw, 3.3rem) }
.nxg-quote .ph-h1 { font-size: clamp(2.2rem, 4vw, 3.6rem) }
.nx .phero .crumb { animation: up-in .9s var(--ease) .1s both }
.nx .ph-h1 .soft   { animation: up-in 1.1s var(--ease) .2s both }
.nx .ph-h1 .strong { animation: up-in 1.1s var(--ease) .35s both }
.nx .ld  { animation: up-in 1s var(--ease) .5s both }
.nx .ld2 { animation: up-in 1s var(--ease) .65s both }

/* =========================================================================
 * Services hub (/services/).
 * Scoped to .nxs because .chips, .steps and .step all exist unscoped in the
 * legacy style.css and would otherwise be overwritten by it.
 * ===================================================================== */
/*
 * The services design caps the heading block so the intro paragraph can sit
 * beside it. The homepage design has no cap, so this stays services-scoped.
 */
.nxs .head-l { max-width: 760px; gap: 16px }

.nxs .sh-top { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 64px; align-items: end; margin-top: 30px }
.nxs .sh-top .sub { margin-top: 24px }
.nxs .sh-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px }
.nxs .sh-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--line) }
.nxs .sh-stats div { padding: 24px 20px 0 0 }
.nxs .sh-stats div + div { padding-left: 20px; border-left: 1px solid var(--line) }
.nxs .sh-stats b { display: block; font-family: 'Vocago', serif; font-weight: 400; font-size: 56px; line-height: 1 }
.nxs .sh-stats span { display: block; font-size: 13.5px; color: var(--mute); margin-top: 10px }

.nxs .finder {
	display: flex; align-items: center; gap: 12px; margin-top: 56px;
	padding: 8px 8px 8px 22px; border-radius: 999px; background: #fff;
	border: 1px solid var(--line); box-shadow: 0 20px 50px -34px rgba(0,0,0,.35);
}
.nxs .finder svg { width: 18px; height: 18px; fill: none; stroke: var(--mute); stroke-width: 1.7; flex: none }
.nxs .finder input { flex: 1; min-width: 0; height: 50px; border: 0; outline: none; background: transparent; font-size: 16px }
.nxs .finder input::placeholder { color: var(--mute) }

/* Legacy style.css also defines .chips (flex + margin-bottom); neutralise it. */
.nxs .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0 }
.nxs .chip {
	height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line);
	font-size: 13px; color: var(--mute); background: none; cursor: pointer; transition: .2s;
}
.nxs .chip:hover { border-color: var(--ink); color: var(--ink) }
.nxs .chip.on { background: var(--ink); color: #fff; border-color: var(--ink) }

.nxs .cats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px }
.nxs .cc {
	display: flex; flex-direction: column; background: #fff; border-radius: 24px;
	overflow: hidden; border: 1px solid rgba(14,13,12,.06);
	transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.nxs .cc.hide { display: none }
.nxs .cc:hover { transform: translateY(-4px); box-shadow: 0 34px 70px -40px rgba(0,0,0,.4) }
.nxs .cc-img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #E7E5E1 }
.nxs .cc-n {
	position: absolute; left: 16px; top: 16px; height: 30px; padding: 0 12px; border-radius: 999px;
	display: inline-flex; align-items: center; background: rgba(255,255,255,.92);
	font-family: 'Geist Mono', monospace; font-size: 11.5px; color: var(--ink);
}
.nxs .cc-ph {
	position: absolute; right: 16px; top: 16px; height: 30px; padding: 0 12px; border-radius: 999px;
	display: inline-flex; align-items: center; background: var(--ink); color: #fff;
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.nxs .cc-b { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1 }
.nxs .cc-b h3 { font-family: 'Vocago', serif; font-weight: 400; font-size: 1.65rem; line-height: 1.15 }
.nxs .cc-b p { font-size: 14.5px; color: var(--mute); line-height: 1.6 }
.nxs .cc-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px }
.nxs .cc-subs span { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; background: var(--ground); color: #4E4540 }
.nxs .cc-f {
	display: flex; justify-content: space-between; align-items: center; margin-top: auto;
	padding-top: 16px; border-top: 1px solid var(--line);
	font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--mute);
}
.nxs .cats-empty { display: none; padding: 48px 0; color: var(--mute); font-size: 16px }
.nxs .cats-empty.on { display: block }

.nxs .paths { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px }
.nxs .path {
	display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: 24px;
	background: #1E1A17; border: 1px solid var(--line-d); transition: border-color .3s, transform .3s;
}
.nxs .path:hover { border-color: rgba(255,255,255,.3); transform: translateY(-4px); color: #fff }
.nxs .path small { font-family: 'Geist Mono', monospace; font-size: 11.5px; color: var(--accent) }
.nxs .path b { font-family: 'Vocago', serif; font-weight: 400; font-size: 1.6rem; line-height: 1.2 }
.nxs .path p { font-size: 14.5px; color: #B9B4AE; line-height: 1.65 }
.nxs .path .lk { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px }
.nxs .path .lk span { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); color: #E1DCD6 }

.nx .walk { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 80px; align-items: start }
.nx .walk-media { position: sticky; top: 130px; border-radius: 28px; overflow: hidden; aspect-ratio: 4/4.6 }
.nx .walk-media img { width: 100%; height: 100%; object-fit: cover }
.nx .copy h2.h2 { margin: 16px 0 20px }
.nx .copy > p { font-size: 17px; line-height: 1.85; color: #3F3833; margin-bottom: 18px }
/*
 * Legacy style.css turns .steps into a four-column card grid and gives .step a
 * background and a hairline shadow. Every one of those properties has to be
 * reset here or the step text collapses into a one-word-wide column.
 */
.nx .steps {
	display: block; grid-template-columns: none; gap: 0;
	background: none; border: 0; border-top: 1px solid var(--line);
	border-radius: 0; overflow: visible;
	list-style: none; margin: 30px 0 0; padding: 0;
	/* .steps is also in the legacy "glassy" panel list, which adds a blur, a
	   shadow and a ::after highlight on top of the background. All three have
	   to go or the steps still read as a bordered card. */
	-webkit-backdrop-filter: none; backdrop-filter: none;
	box-shadow: none; position: static;
}
.nx .steps::after, .nx .steps::before { content: none }
.nx .step {
	display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 20px;
	padding: 30px 0; background: none; box-shadow: none;
	border: 0; border-bottom: 1px solid var(--line);
}
.nx .step .n { font-family: 'Vocago', serif; font-size: 2.2rem; line-height: 1; color: var(--soft) }
.nx .step h3 { font-family: 'Vocago', serif; font-weight: 400; font-size: 1.6rem; line-height: 1.2; letter-spacing: .01em; margin-bottom: 10px }
.nx .step p { font-size: 16px; line-height: 1.8; color: #4E4540 }
.nx .step a, .nx .copy a.il {
	color: var(--ink); text-decoration: underline;
	text-decoration-color: rgba(168,81,31,.6); text-underline-offset: 4px;
}
.nx .honest {
	margin-top: 30px; padding: 26px 28px; border-radius: 22px;
	background: var(--ink); color: #EDE7E2; display: flex; gap: 18px;
}
.nx .honest svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.7; margin-top: 3px }
.nx .honest p { font-size: 15.5px; line-height: 1.75 }

.nxs .inds { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px }
.nxs .ind {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	padding: 22px; border-radius: 18px; background: #fff;
	border: 1px solid rgba(14,13,12,.06); transition: border-color .2s;
}
.nxs .ind:hover { border-color: var(--ink) }
.nxs .ind b { font-weight: 500; font-size: 15.5px }
/* Description line only. The design's rule was ".ind span", which also caught the
   arrow circle (a span) and knocked the arrow out of it. */
.nxs .ind div span { display: block; font-size: 12.5px; color: var(--mute); margin-top: 2px }

.nx .g-faq { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 80px; align-items: start }

@media (max-width: 1080px) {
	.nxs .sh-top, .nx .walk, .nx .g-faq { grid-template-columns: minmax(0,1fr) }
	.nxs .cats { grid-template-columns: repeat(2,minmax(0,1fr)) }
	.nxs .paths { grid-template-columns: minmax(0,1fr) }
	.nxs .inds { grid-template-columns: repeat(2,minmax(0,1fr)) }
	.nx .walk-media { position: relative; top: 0; aspect-ratio: 16/10 }
}
@media (max-width: 760px) {
	.nxs .cats, .nxs .inds { grid-template-columns: minmax(0,1fr) }
	.nxs .sh-stats b { font-size: 40px }
	.nxs .finder { border-radius: 22px; flex-wrap: wrap }
	.nxs .finder input { width: 100% }
}

/* =========================================================================
 * Service detail pages (/services/…), all three depths.
 * .nxp is shared; .nxp-cat, .nxp-sub and .nxp-svc carry the differences.
 * ===================================================================== */
.nxp .close-l { margin-top: 26px; font-size: 16px; line-height: 1.8; color: #3F3833 }
.nxp .close-l a, .nxp .copy a.il {
	color: var(--ink); text-decoration: underline;
	text-decoration-color: rgba(168,81,31,.6); text-underline-offset: 4px;
}
.nxp .intro { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 72px; align-items: end; margin-bottom: 48px }
.nxp .intro p { font-size: 17px; line-height: 1.85; color: #3F3833 }
/* The detail designs use a narrower media column than the services hub. */
.nxp .walk { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr) }

.nxp .walk-side { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 20px }
.nxp .walk-side .walk-media { position: relative; top: 0; aspect-ratio: 4/4.4 }
.nxp .walk-note {
	display: flex; gap: 14px; align-items: center; padding: 18px 20px;
	border-radius: 18px; background: #fff; border: 1px solid rgba(14,13,12,.06);
}
.nxp .walk-note b { display: block; font-weight: 500; font-size: 14.5px }
.nxp .walk-note span { font-size: 13px; color: var(--mute) }
.nxp .walk-note i { width: 44px; height: 44px; border-radius: 99px; background: var(--ink); display: grid; place-items: center; flex: none }
.nxp .walk-note svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.6 }

/* hero: category collage */
.nxp .c-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: center; margin-top: 30px }
.nxp .c-hero .sub { margin-top: 24px }
.nxp .c-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px }
.nxp .facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 44px; border-top: 1px solid var(--line) }
.nxp .facts div { padding: 20px 16px 0 0 }
.nxp .facts div + div { padding-left: 16px; border-left: 1px solid var(--line) }
.nxp .facts b { display: block; font-family: 'Vocago', serif; font-weight: 400; font-size: 34px; line-height: 1 }
.nxp .facts span { display: block; font-size: 12.5px; color: var(--mute); margin-top: 8px; line-height: 1.4 }
.nxp .c-art { position: relative; aspect-ratio: 1/1.02 }
.nxp .c-art .a { position: absolute; right: 0; top: 0; width: 84%; height: 86%; border-radius: 999px 999px 28px 28px; overflow: hidden }
/* Legacy style.css lists .b among its glass panels, so the blur and the panel
   background are cleared here; only the border and the drop shadow are ours. */
.nxp .c-art .b {
	position: absolute; left: 0; bottom: 0; width: 42%; aspect-ratio: 4/5; border-radius: 22px; overflow: hidden;
	border: 8px solid var(--ground); box-shadow: 0 30px 60px -30px rgba(0,0,0,.45);
	background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.nxp .c-art .b::after, .nxp .c-art .b::before { content: none }
.nxp .c-art img { width: 100%; height: 100%; object-fit: cover }
.nxp .c-art .tag {
	position: absolute; right: 20px; bottom: 20%; padding: 14px 18px; border-radius: 16px;
	background: rgba(255,255,255,.94); box-shadow: 0 20px 40px -24px rgba(0,0,0,.35);
}
.nxp .c-art .tag small { display: block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-ink) }
.nxp .c-art .tag b { display: block; font-weight: 500; font-size: 14.5px; margin-top: 4px }

/* sub-category cards on a category page */
.nxp .subs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px }
.nxp .sc {
	display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); background: #fff;
	border-radius: 26px; overflow: hidden; border: 1px solid rgba(14,13,12,.06);
	transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.nxp .sc:hover { transform: translateY(-4px); box-shadow: 0 34px 70px -40px rgba(0,0,0,.4) }
.nxp .sc-img { position: relative; overflow: hidden; min-height: 300px; background: #E7E5E1 }
.nxp .sc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.nxp .sc-b { padding: 28px; display: flex; flex-direction: column; gap: 12px }
.nxp .sc-b small { font-family: 'Geist Mono', monospace; font-size: 11.5px; color: var(--mute) }
.nxp .sc-b h3 { font-family: 'Vocago', serif; font-weight: 400; font-size: 1.6rem; line-height: 1.15 }
.nxp .sc-b ul { list-style: none; display: grid; gap: 0; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--line) }
.nxp .sc-b li a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; transition: color .2s, padding .3s }
.nxp .sc-b li a:hover { color: var(--accent-ink); padding-left: 6px }
.nxp .sc-b li a span { color: var(--mute); font-size: 12px }
.nxp .sc-more { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase }

/* product cards (4-up) used on category, sub-category and service pages */
.nxp .g4 { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px }
.nxp .pd {
	display: flex; flex-direction: column; background: #fff; border-radius: 22px; overflow: hidden;
	border: 1px solid rgba(14,13,12,.06); transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.nxp .pd:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(0,0,0,.4) }
.nxp .pd-img { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #E7E5E1 }
.nxp .pd-tag { position: absolute; left: 14px; top: 14px; height: 28px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 11.5px; background: #fff }
.nxp .pd-b { padding: 20px 20px 0; flex: 1 }
.nxp .pd-b h3 { font-weight: 500; font-size: 1.15rem; font-family: 'General Sans', sans-serif }
.nxp .pd-b p { font-size: 14px; color: var(--mute); margin-top: 4px; line-height: 1.55 }
.nxp .pd-f { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 20px }
.nxp .pd-f .t { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--mute) }

/* service page hero */
.nxp .sv { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 56px; align-items: start; margin-top: 28px }
.nxp .gal { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 12px }
.nxp .gal-main { position: relative; aspect-ratio: 1/1.02; border-radius: 28px; overflow: hidden; background: #E7E5E1 }
.nxp .gal-main img { width: 100%; height: 100%; object-fit: cover }
.nxp .gal-badge { position: absolute; left: 18px; top: 18px; display: flex; gap: 8px }
.nxp .gal-badge span { height: 30px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 11.5px; background: rgba(255,255,255,.92) }
.nxp .gal-badge span.dk2 { background: var(--ink); color: #fff }
.nxp .cfg { display: flex; flex-direction: column; gap: 22px }
.nxp .lead { font-size: 16.5px; line-height: 1.8; color: #4E4540 }
.nxp .mini { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; color: var(--mute) }
.nxp .mini span { display: inline-flex; align-items: center; gap: 7px }
.nxp .mini svg { width: 15px; height: 15px; fill: none; stroke: var(--accent-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.nxp .brief { padding: 20px 22px; border-radius: 20px; background: var(--ink); color: #fff; display: flex; flex-direction: column; gap: 14px }
.nxp .brief small { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: #A7A29C }
.nxp .brief p { font-family: 'Geist Mono', monospace; font-size: 14px; line-height: 1.6; color: #EDE7E2 }
.nxp .brief-cta { display: flex; flex-wrap: wrap; gap: 10px }
.nxp .brief .btn { min-height: 50px }
.nxp .brief-n { font-size: 12.5px; color: #A7A29C }

/* sticky section nav */
.nxp .subnav { position: sticky; top: 112px; z-index: 30; margin-bottom: 60px }
.nxp .subnav ul {
	display: flex; gap: 4px; list-style: none; padding: 6px; border-radius: 999px;
	background: rgba(255,255,255,.88); border: 1px solid var(--line); width: max-content; margin: 0 auto;
}
.nxp .subnav a { display: block; padding: 10px 18px; border-radius: 999px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); transition: .2s }
.nxp .subnav a:hover { background: var(--ink); color: #fff }

/* related / sibling strips */
.nxp .rel { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px }
.nxp .rp { display: flex; flex-direction: column; background: #fff; border-radius: 22px; overflow: hidden; border: 1px solid rgba(14,13,12,.06); transition: box-shadow .35s var(--ease), transform .35s var(--ease) }
.nxp .rp:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(0,0,0,.4) }
.nxp .rp-img { aspect-ratio: 1/1; overflow: hidden; background: #E7E5E1 }
.nxp .rp-img img { width: 100%; height: 100%; object-fit: cover }
.nxp .rp-b { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px }
.nxp .rp-b b { display: block; font-weight: 500; font-size: 15.5px }
.nxp .rp-b span { font-size: 13px; color: var(--mute) }

@media (max-width: 1080px) {
	.nxp .c-hero, .nxp .sv, .nxp .intro, .nxp .g-faq, .nxp .walk { grid-template-columns: minmax(0,1fr) }
	.nxp .subs { grid-template-columns: minmax(0,1fr) }
	.nxp .g4, .nxp .rel { grid-template-columns: repeat(2,minmax(0,1fr)) }
	.nxp .facts { grid-template-columns: repeat(2,minmax(0,1fr)) }
	.nxp .facts div:nth-child(3) { padding-left: 0; border-left: 0 }
	.nxp .gal, .nxp .walk-side { position: relative; top: 0 }
	.nxp .subnav { display: none }
	.nxp .c-art { aspect-ratio: 16/11 }
}
@media (max-width: 760px) {
	.nxp .g4, .nxp .rel { grid-template-columns: minmax(0,1fr) }
	.nxp .sc { grid-template-columns: minmax(0,1fr) }
	.nxp .sc-img { min-height: 220px }
	.nxp .facts b { font-size: 28px }
}

/* =========================================================================
 * General pages. .nxg is shared; .nxg-contact, .nxg-quote, .nxg-about,
 * .nxg-faqs and .nxg-work carry the per-page pieces.
 * ===================================================================== */
.nxg .box { border-radius: 26px; background: #fff; border: 1px solid rgba(14,13,12,.06); padding: 28px }
.nxg .box h3 { font-family: 'Vocago', serif; font-weight: 400; font-size: 1.4rem; text-transform: uppercase; margin-bottom: 14px }
.nxg .box address { font-style: normal; font-size: 15.5px; line-height: 1.75; color: #3F3833 }

/* Legacy style.css styles .fld and .fld label; every property it sets is
   restated here so form fields do not inherit the old dark-theme treatment. */
.nxg .fld { display: flex; flex-direction: column; gap: 8px; margin: 0 }
.nxg .fld label { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); margin: 0 }
.nxg .fld input, .nxg .fld textarea, .nxg .fld select {
	width: 100%; height: 56px; padding: 0 18px; border-radius: 16px; border: 1px solid var(--line);
	background: #FBFAF8; color: var(--ink); font-family: inherit; font-size: 15.5px; outline: none;
	transition: border-color .2s, background .2s; appearance: none;
}
.nxg .fld textarea { height: 140px; padding: 16px 18px; resize: vertical }
.nxg .fld input:focus, .nxg .fld textarea:focus, .nxg .fld select:focus { border-color: var(--ink); background: #fff }
.nxg .row2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px }
.nxg .form { display: grid; gap: 16px; padding: 40px; border-radius: 30px; background: #fff; border: 1px solid rgba(14,13,12,.06) }
.nxg .form .ft { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px }
.nxg .form .ft small { font-size: 13px; color: var(--mute) }
.nxg .topics { display: flex; flex-wrap: wrap; gap: 8px }
.nxg .tp {
	height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line);
	background: none; font-size: 13.5px; color: var(--ink); cursor: pointer; transition: .2s;
}
.nxg .tp:hover { border-color: var(--ink) }
.nxg .tp.on { background: var(--ink); color: #fff; border-color: var(--ink) }
.nxg .notice { padding: 16px 20px; border-radius: 18px; font-size: 14.5px; margin-bottom: 20px }
.nxg .notice.ok { background: #EAF6EE; border: 1px solid #BFE3CC; color: #1E5A33 }
.nxg .notice.bad { background: #FBEDE8; border: 1px solid #EFCBBD; color: #8A3415 }

/* contact */
.nxg-contact .c-hero { padding: 56px 0 50px }
.nxg-contact .c-top { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 64px; align-items: end; margin-top: 30px }
.nxg-contact .open-now {
	display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 18px 0 14px;
	border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13px; margin-top: 24px;
}
.nxg-contact .open-now i { width: 9px; height: 9px; border-radius: 99px; background: #3BC46E; box-shadow: 0 0 0 5px rgba(59,196,110,.18); animation: nxg-pulse 2s infinite }
@keyframes nxg-pulse { 50% { box-shadow: 0 0 0 10px rgba(59,196,110,0) } }
.nxg-contact .ways { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-top: 56px }
.nxg-contact .way {
	display: flex; flex-direction: column; gap: 30px; padding: 28px; border-radius: 26px;
	background: #fff; border: 1px solid rgba(14,13,12,.06); min-height: 260px;
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.nxg-contact .way:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -40px rgba(0,0,0,.45) }
.nxg-contact .way .ic { width: 54px; height: 54px; border-radius: 99px; background: var(--ground); display: grid; place-items: center }
.nxg-contact .way .ic svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.6 }
.nxg-contact .way.dark { background: var(--ink); color: #fff; border-color: var(--ink) }
.nxg-contact .way.dark .ic { background: #25A35A }
.nxg-contact .way.dark .ic svg { stroke: #fff }
.nxg-contact .way.dark .circ { border-color: rgba(255,255,255,.25) }
.nxg-contact .way small { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--mute) }
.nxg-contact .way.dark small { color: #A7A29C }
.nxg-contact .way b { display: block; font-weight: 500; font-size: 1.3rem; margin-top: 6px; overflow-wrap: anywhere }
.nxg-contact .way span.d { display: block; font-size: 14px; color: var(--mute); margin-top: 4px }
.nxg-contact .way.dark span.d { color: #B9B4AE }
.nxg-contact .way .ft { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px }
.nxg-contact .visit { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: 20px }
.nxg-contact .map { position: relative; border-radius: 30px; overflow: hidden; min-height: 560px; background: #1A1714 }
.nxg-contact .map svg.streets { position: absolute; inset: 0; width: 100%; height: 100% }
.nxg-contact .map .pin { position: absolute; left: 56%; top: 46%; transform: translate(-50%,-100%); display: flex; flex-direction: column; align-items: center; gap: 10px }
.nxg-contact .map .pin .lbl { padding: 12px 16px; border-radius: 14px; background: #fff; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); text-align: center; white-space: nowrap }
.nxg-contact .map .pin .lbl b { display: block; font-weight: 500; font-size: 14px }
.nxg-contact .map .pin .lbl span { font-size: 12px; color: var(--mute) }
.nxg-contact .map .pin .dot { position: relative; width: 20px; height: 20px; border-radius: 99px; background: var(--accent); border: 4px solid #fff }
.nxg-contact .map .pin .dot::before { content: ""; position: absolute; inset: -14px; border-radius: 99px; border: 2px solid var(--accent); animation: nxg-ring 2.2s infinite }
@keyframes nxg-ring { from { transform: scale(.4); opacity: 1 } to { transform: scale(1.8); opacity: 0 } }
.nxg-contact .map .tagl { position: absolute; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #7D7066 }
.nxg-contact .map .dir { position: absolute; left: 24px; bottom: 24px; display: flex; gap: 10px; flex-wrap: wrap }
.nxg-contact .map .dir a {
	height: 46px; padding: 0 18px; border-radius: 999px; background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.18); color: #fff; display: inline-flex; align-items: center;
	gap: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.nxg-contact .map .dir a:hover { background: #fff; color: var(--ink) }
.nxg-contact .info { display: flex; flex-direction: column; gap: 16px }
.nxg-contact .hours { list-style: none; display: grid; margin: 0; padding: 0 }
.nxg-contact .hours li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px }
.nxg-contact .hours li:last-child { border-bottom: 0 }
.nxg-contact .hours li span { font-family: 'Geist Mono', monospace; font-size: 12.5px; color: var(--mute) }
.nxg-contact .hours li.today { color: var(--accent-ink) }
.nxg-contact .hours li.today span { color: var(--accent-ink) }
.nxg-contact .park { font-size: 14px; color: var(--mute); line-height: 1.7 }
.nxg-contact .c-form { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 80px; align-items: start }

@media (max-width: 1080px) {
	.nxg-contact .c-top, .nxg-contact .visit, .nxg-contact .c-form { grid-template-columns: minmax(0,1fr) }
	.nxg-contact .ways { grid-template-columns: repeat(2,minmax(0,1fr)) }
}
@media (max-width: 760px) {
	.nxg-contact .ways { grid-template-columns: minmax(0,1fr) }
	.nxg .row2 { grid-template-columns: minmax(0,1fr) }
	.nxg .form { padding: 24px }
	.nxg-contact .map { min-height: 440px }
}

/* faqs */
.nxg-faqs .f-hero { padding: 56px 0 60px; text-align: center }
.nxg-faqs .f-hero .crumb { justify-content: center }
.nxg-faqs .f-hero .ph-h1 { margin: 30px auto 0; max-width: 1000px }
.nxg-faqs .f-hero .sub { margin: 22px auto 0 }
.nxg-faqs .fsearch {
	display: flex; align-items: center; gap: 14px; max-width: 720px; height: 68px; margin: 34px auto 0;
	padding: 0 10px 0 26px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
	box-shadow: 0 30px 60px -44px rgba(0,0,0,.4); transition: border-color .2s, box-shadow .3s;
}
.nxg-faqs .fsearch:focus-within { border-color: var(--ink); box-shadow: 0 30px 60px -36px rgba(0,0,0,.45) }
.nxg-faqs .fsearch svg { width: 20px; height: 20px; fill: none; stroke: var(--mute); stroke-width: 1.7; flex: none }
.nxg-faqs .fsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16.5px }
.nxg-faqs .fsearch > span { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--mute); padding-right: 14px; white-space: nowrap }
.nxg-faqs .pop { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; font-size: 13px; color: var(--mute) }
.nxg-faqs .pop button { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: none; font-size: 13px; color: var(--mute); cursor: pointer; transition: .2s }
.nxg-faqs .pop button:hover { border-color: var(--ink); color: var(--ink) }
.nxg-faqs .f-body { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 72px; align-items: start; padding-bottom: 110px }
.nxg-faqs .tabs { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 6px }
.nxg-faqs .tab {
	display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%;
	height: 58px; padding: 0 20px; border: 0; border-radius: 18px; background: none;
	font-size: 14.5px; text-align: left; color: var(--mute); cursor: pointer; transition: background .25s, color .25s;
}
.nxg-faqs .tab span { font-family: 'Geist Mono', monospace; font-size: 11.5px; color: #8E8983 }
.nxg-faqs .tab:hover { background: #fff; color: var(--ink) }
.nxg-faqs .tab.on { background: var(--ink); color: #fff }
.nxg-faqs .tab.on span { color: #A49D98 }
.nxg-faqs .tabs .help { margin-top: 18px; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid rgba(14,13,12,.06); display: flex; flex-direction: column; gap: 10px }
.nxg-faqs .tabs .help b { font-weight: 500; font-size: 15px }
.nxg-faqs .tabs .help span { font-size: 13.5px; color: var(--mute) }
.nxg-faqs .tabs .help a { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink) }
.nxg-faqs .group { margin-bottom: 56px }
.nxg-faqs .group.hide { display: none }
.nxg-faqs .group-h { display: flex; align-items: baseline; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line) }
.nxg-faqs .group-h h2 { font-family: 'Vocago', serif; font-weight: 400; text-transform: uppercase; font-size: 1.9rem; line-height: 1.1 }
.nxg-faqs .group-h small { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--mute) }
.nxg-faqs .ai.hide { display: none }
.nxg-faqs .empty { display: none; padding: 60px 0; text-align: center; color: var(--mute) }
.nxg-faqs .empty.on { display: block }
.nxg-faqs .empty b { display: block; font-family: 'Vocago', serif; font-weight: 400; font-size: 1.6rem; text-transform: uppercase; color: var(--ink); margin-bottom: 8px }
.nxg-faqs .still {
	display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 40px; align-items: center;
	padding: 48px; border-radius: 32px; background: var(--ink); color: #fff; margin-bottom: 110px;
}
.nxg-faqs .still .disp em { color: #A49D98 }
.nxg-faqs .still p { color: #B9B4AE; margin-top: 14px; max-width: 520px }
.nxg-faqs .still .b { display: flex; gap: 12px; flex-wrap: wrap }
@media (max-width: 1080px) {
	.nxg-faqs .f-body { grid-template-columns: minmax(0,1fr) }
	.nxg-faqs .tabs { position: relative; top: 0; flex-direction: row; flex-wrap: wrap }
	.nxg-faqs .tab { width: auto; height: 46px }
	.nxg-faqs .tabs .help { display: none }
	.nxg-faqs .still { grid-template-columns: minmax(0,1fr) }
}
@media (max-width: 760px) { .nxg-faqs .still { padding: 28px } }

/*
 * Legacy style.css styles a bare `.b` as a glass panel. It is a natural class
 * name for a button wrapper and has now collided twice, so neutralise it once
 * for the whole Concept D layer. More specific rules (.nxp .c-art .b) still win.
 */
.nx .b { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none }
.nx .b::after, .nx .b::before { content: none }
.nxp .c-art .b::after, .nxp .c-art .b::before { content: none }

/* about */
.nxg-about .a-top { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: 64px; align-items: end; margin-top: 30px }
.nxg-about .a-top .sub { max-width: 520px }
.nxg-about .a-plate { position: relative; margin-top: 56px; border-radius: 32px; overflow: hidden; aspect-ratio: 21/9 }
.nxg-about .a-plate img { width: 100%; height: 100%; object-fit: cover }
.nxg-about .a-plate .badge {
	position: absolute; left: 28px; bottom: 28px; display: flex; align-items: center; gap: 14px;
	padding: 14px 20px 14px 14px; border-radius: 999px; background: rgba(14,13,12,.78);
	color: #fff; font-size: 13px; letter-spacing: .06em;
}
.nxg-about .a-plate .badge i { width: 10px; height: 10px; border-radius: 99px; background: #3BC46E; box-shadow: 0 0 0 6px rgba(59,196,110,.2); animation: nxg-pulse 2s infinite }
.nxg-about .stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.nxg-about .stats div { padding: 34px 24px 30px 0 }
.nxg-about .stats div + div { padding-left: 24px; border-left: 1px solid var(--line) }
.nxg-about .stats b { display: block; font-family: 'Vocago', serif; font-weight: 400; font-size: clamp(2.6rem,4vw,3.6rem); line-height: 1 }
.nxg-about .stats span { display: block; font-size: 13.5px; color: var(--mute); margin-top: 10px }
.nxg-about .story { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 90px; align-items: start }
.nxg-about .story-side { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 22px }
.nxg-about .story-side .q { font-family: 'Vocago', serif; font-size: clamp(1.6rem,2.4vw,2.2rem); line-height: 1.2; text-transform: uppercase }
.nxg-about .story-side .q em { font-style: normal; color: var(--soft) }
.nxg-about .story-side .who { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--mute) }
.nxg-about .story-side .who i { width: 48px; height: 48px; border-radius: 99px; background: #D8D2CB; display: grid; place-items: center; font-style: normal; font-family: 'Vocago', serif; color: var(--ink) }
.nxg-about .chap { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line) }
.nxg-about .chap li { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; padding: 34px 0; border-bottom: 1px solid var(--line) }
.nxg-about .chap small { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--accent-ink); padding-top: 8px }
.nxg-about .chap h3 { font-family: 'Vocago', serif; font-weight: 400; font-size: 1.7rem; line-height: 1.2; margin-bottom: 10px; text-transform: uppercase }
.nxg-about .chap p { font-size: 16px; line-height: 1.85; color: #4E4540 }
.nxg-about .chap ul { margin: 10px 0 0; padding: 0 0 0 20px; font-size: 16px; line-height: 1.8; color: #4E4540 }
.nxg-about .chap li li { display: list-item; grid-template-columns: none; padding: 4px 0; border: 0 }
.nxg-about .floor { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px }
.nxg-about .fl { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4/4.6; color: #fff; display: flex; align-items: flex-end }
.nxg-about .fl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.nxg-about .fl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.82)) }
.nxg-about .fl-c { position: relative; z-index: 2; padding: 26px; display: flex; flex-direction: column; gap: 8px }
.nxg-about .fl-c small { font-family: 'Geist Mono', monospace; font-size: 11.5px; color: rgba(255,255,255,.7) }
.nxg-about .fl-c b { font-family: 'Vocago', serif; font-weight: 400; font-size: 1.5rem; line-height: 1.15; text-transform: uppercase }
.nxg-about .prin { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--line-d); border: 1px solid var(--line-d); border-radius: 26px; overflow: hidden }
.nxg-about .pr { padding: 38px 32px; background: var(--ink); display: flex; flex-direction: column; gap: 18px; min-height: 320px }
.nxg-about .pr .n { font-family: 'Vocago', serif; font-size: 3.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.3) }
.nxg-about .pr b { font-family: 'Vocago', serif; font-weight: 400; font-size: 1.6rem; line-height: 1.2; text-transform: uppercase; margin-top: auto }
.nxg-about .pr p { font-size: 15px; line-height: 1.75; color: #B9B4AE }
.nxg-about .corp { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px }
.nxg-about .corp-l { border-radius: 28px; overflow: hidden; min-height: 520px; position: relative }
.nxg-about .corp-l img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.nxg-about .corp-r { border-radius: 28px; background: #fff; border: 1px solid rgba(14,13,12,.06); padding: 44px; display: flex; flex-direction: column; gap: 22px }
.nxg-about .corp-r ul { list-style: none; display: grid; margin: 0; padding: 0; border-top: 1px solid var(--line) }
.nxg-about .corp-r li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.6 }
.nxg-about .corp-r li::before { content: "✓"; color: var(--accent-ink); flex: none; font-size: 15px; line-height: 1.6 }
.nxg-about .corp-r .btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto }
@media (max-width: 1080px) {
	.nxg-about .a-top, .nxg-about .story, .nxg-about .corp { grid-template-columns: minmax(0,1fr) }
	.nxg-about .story-side { position: relative; top: 0 }
	.nxg-about .floor, .nxg-about .prin { grid-template-columns: minmax(0,1fr) minmax(0,1fr) }
	.nxg-about .stats { grid-template-columns: repeat(2,minmax(0,1fr)) }
	.nxg-about .stats div:nth-child(3) { padding-left: 0; border-left: 0 }
}
@media (max-width: 760px) {
	.nxg-about .a-plate { aspect-ratio: 4/3 }
	.nxg-about .floor, .nxg-about .prin { grid-template-columns: minmax(0,1fr) }
	.nxg-about .chap li { grid-template-columns: minmax(0,1fr); gap: 6px }
	.nxg-about .corp-r { padding: 28px }
	.nxg-about .corp-l { min-height: 300px }
}

/* our work */
.nxg-work .w-top { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 64px; align-items: end; margin-top: 30px }
.nxg-work .w-count { display: flex; gap: 40px; margin-top: 28px }
.nxg-work .w-count b { display: block; font-family: 'Vocago', serif; font-weight: 400; font-size: 2.6rem; line-height: 1 }
.nxg-work .w-count span { font-size: 12.5px; color: var(--mute) }
.nxg-work .filters {
	position: sticky; top: 112px; z-index: 20; display: flex; gap: 8px; flex-wrap: wrap;
	padding: 12px; margin-bottom: 34px; border-radius: 999px; background: rgba(246,243,239,.92);
	border: 1px solid var(--line); width: max-content; max-width: 100%;
}
.nxg-work .chip {
	height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: none;
	font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute);
	cursor: pointer; transition: .25s; display: inline-flex; align-items: center; gap: 8px;
}
.nxg-work .chip span { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0; color: #8E8983 }
.nxg-work .chip:hover { color: var(--ink) }
.nxg-work .chip.on { background: var(--ink); color: #fff }
.nxg-work .chip.on span { color: #A49D98 }
.nxg-work .grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: 150px; gap: 18px }
.nxg-work .pj { position: relative; border-radius: 24px; overflow: hidden; color: #fff; display: flex; align-items: flex-end }
.nxg-work .pj.hide { display: none }
.nxg-work .pj img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.nxg-work .pj::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.78)); transition: opacity .4s }
.nxg-work .pj.t { grid-row: span 3 }
.nxg-work .pj.m { grid-row: span 2 }
.nxg-work .pj.l { grid-row: span 4 }
.nxg-work .pj-c { position: relative; z-index: 2; width: 100%; padding: 22px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; transform: translateY(10px); transition: transform .5s var(--ease) }
.nxg-work .pj:hover .pj-c { transform: none }
.nxg-work .pj-c small { display: block; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.72) }
.nxg-work .pj-c b { display: block; font-family: 'Vocago', serif; font-weight: 400; font-size: 1.35rem; line-height: 1.15; margin-top: 4px }
.nxg-work .pj .circ { border-color: rgba(255,255,255,.3) }
.nxg-work .pj .smp {
	position: absolute; top: 16px; left: 16px; z-index: 2; height: 26px; padding: 0 10px;
	border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink);
	font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center;
}
.nxg-work .shoot {
	display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 40px; align-items: center;
	padding: 44px; border-radius: 32px; background: var(--ink); color: #fff; margin-top: 60px;
}
.nxg-work .shoot p { color: #B9B4AE; margin-top: 14px; max-width: 560px }
.nxg-work .shoot .b { display: flex; gap: 12px; flex-wrap: wrap }
@media (max-width: 1080px) {
	.nxg-work .w-top, .nxg-work .shoot { grid-template-columns: minmax(0,1fr) }
	.nxg-work .grid { grid-template-columns: repeat(2,minmax(0,1fr)) }
	.nxg-work .filters { position: relative; top: 0; border-radius: 24px }
}
@media (max-width: 760px) {
	.nxg-work .grid { grid-template-columns: minmax(0,1fr); grid-auto-rows: 120px }
	.nxg-work .shoot { padding: 28px }
}

/* request a quote */
.nxg-quote .q { padding: 56px 0 110px }
.nxg-quote .q-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin: 30px 0 44px }
.nxg-quote .q-top .sub { max-width: 460px }
.nxg-quote .q-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr); gap: 24px; align-items: start }
.nxg-quote .panel { background: #fff; border-radius: 30px; border: 1px solid rgba(14,13,12,.06); padding: 40px; box-shadow: 0 40px 80px -60px rgba(0,0,0,.35) }
.nxg-quote .side { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 16px }
.nxg-quote .sum { border-radius: 30px; background: var(--ink); color: #fff; padding: 32px; display: flex; flex-direction: column; gap: 20px }
.nxg-quote .sum small { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: #8C8179 }
.nxg-quote .sum h3 { font-family: 'Vocago', serif; font-weight: 400; font-size: 1.6rem; text-transform: uppercase; line-height: 1.15 }
.nxg-quote .sum dl { display: grid; margin: 0; border-top: 1px solid var(--line-d) }
.nxg-quote .sum dl div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-d); font-size: 14px }
.nxg-quote .sum dt { color: #8C8179; margin: 0 }
.nxg-quote .sum dd { text-align: right; margin: 0 }
.nxg-quote .assure { border-radius: 24px; background: #fff; border: 1px solid rgba(14,13,12,.06); padding: 22px 24px; display: grid; gap: 14px }
.nxg-quote .assure > div { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; line-height: 1.55 }
.nxg-quote .assure svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--accent-ink); stroke-width: 1.7; margin-top: 1px }
.nxg-quote .assure b { display: block; font-weight: 500 }
.nxg-quote .assure span { color: var(--mute) }

/*
 * The enquiry form comes from printhub-core with its own ph-* classes and its
 * own stylesheet. It is restyled here rather than rebuilt, so the tested
 * submission flow, file upload and notification all stay exactly as they are.
 */
.nxg-quote .ph-enquire, .nxg-quote .ph-enq-form { max-width: none; margin: 0; padding: 0; background: none; border: 0 }
.nxg-quote .ph-step { border: 0; padding: 0 0 34px; margin: 0 }
.nxg-quote .ph-step + .ph-step { padding-top: 34px; border-top: 1px solid var(--line) }
.nxg-quote .ph-step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px }
.nxg-quote .ph-step-num {
	width: 34px; height: 34px; border-radius: 99px; background: var(--ink); color: #fff;
	display: grid; place-items: center; font-family: 'Geist Mono', monospace; font-size: 13px; flex: none;
}
.nxg-quote .ph-step-head h2, .nxg-quote .ph-step-head h3 {
	font-family: 'Vocago', serif; font-weight: 400; text-transform: uppercase;
	font-size: 1.5rem; line-height: 1.15; margin: 0;
}
.nxg-quote .ph-group-label, .nxg-quote .ph-field > label {
	font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); margin: 0 0 8px; display: block;
}
.nxg-quote .ph-field { margin-bottom: 16px }
.nxg-quote .ph-field input[type="text"], .nxg-quote .ph-field input[type="email"],
.nxg-quote .ph-field input[type="tel"], .nxg-quote .ph-field input[type="number"],
.nxg-quote .ph-field textarea, .nxg-quote .ph-field select, .nxg-quote .ph-qty-other {
	width: 100%; height: 56px; padding: 0 18px; border-radius: 16px; border: 1px solid var(--line);
	background: #FBFAF8; color: var(--ink); font-family: inherit; font-size: 15.5px; outline: none;
	transition: border-color .2s, background .2s; box-shadow: none;
}
.nxg-quote .ph-field textarea { height: 140px; padding: 16px 18px; resize: vertical }
.nxg-quote .ph-field input:focus, .nxg-quote .ph-field textarea:focus, .nxg-quote .ph-field select:focus { border-color: var(--ink); background: #fff }
.nxg-quote .ph-chips, .nxg-quote .ph-cards { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none }
.nxg-quote .ph-chip, .nxg-quote .ph-card {
	display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 18px;
	border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink);
	font-size: 14px; cursor: pointer; transition: .2s; box-shadow: none;
}
.nxg-quote .ph-chip:hover, .nxg-quote .ph-card:hover { border-color: var(--ink) }
.nxg-quote .ph-chip input:checked + *, .nxg-quote .ph-chip.is-on, .nxg-quote .ph-card.is-on { background: var(--ink); color: #fff; border-color: var(--ink) }
.nxg-quote .ph-dropzone {
	display: flex; align-items: center; gap: 18px; padding: 22px; border-radius: 20px;
	border: 1.5px dashed #CFC7C0; background: #FBFAF8;
}
.nxg-quote .ph-dropzone-icon { width: 48px; height: 48px; border-radius: 99px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; flex: none }
.nxg-quote .ph-submit {
	display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 54px;
	padding: 0 28px; border-radius: 999px; background: var(--ink); color: #fff; border: 0;
	font-family: inherit; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
}
.nxg-quote .ph-submit:hover { background: #000; color: #fff }
.nxg-quote .ph-notice { padding: 16px 20px; border-radius: 18px; font-size: 14.5px; margin-bottom: 20px }
.nxg-quote .ph-notice-success { background: #EAF6EE; border: 1px solid #BFE3CC; color: #1E5A33 }
.nxg-quote .ph-notice-error { background: #FBEDE8; border: 1px solid #EFCBBD; color: #8A3415 }
.nxg-quote .ph-help, .nxg-quote .ph-reassure { font-size: 13.5px; color: var(--mute); line-height: 1.6 }
.nxg-quote .ph-channels { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px }

@media (max-width: 1080px) {
	.nxg-quote .q-grid { grid-template-columns: minmax(0,1fr) }
	.nxg-quote .side { position: relative; top: 0 }
}
@media (max-width: 760px) { .nxg-quote .panel { padding: 24px } }

/* industries */
.nxi .i-hero { position: relative; margin-top: 30px; border-radius: 32px; overflow: hidden; min-height: 620px; display: flex; align-items: flex-end; color: #fff }
.nxi .i-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
/* The kit panel sits at the pale end of this gradient, so the right-hand stop
   is darker than the design's .12 to keep white text legible over any photo. */
.nxi .i-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(14,13,12,.92) 0%,rgba(14,13,12,.68) 45%,rgba(14,13,12,.42) 100%) }
.nxi .i-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 56px; align-items: end; width: 100%; padding: 56px }
.nxi .i-in .ph-h1 .soft { color: #A49D98 }
.nxi .i-in .sub { color: #D6D0CA; margin-top: 22px }
.nxi .i-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px }
/* A dark panel, not a light one: white text on light glass over an unknown
   photograph cannot be guaranteed to pass contrast. */
.nxi .kit {
	padding: 26px; border-radius: 24px; background: rgba(14,13,12,.78);
	border: 1px solid rgba(255,255,255,.2);
	-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.nxi .kit small { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: #CBC5BF }
.nxi .kit ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid }
.nxi .kit li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 14.5px }
.nxi .kit li a { color: #fff }
.nxi .kit li span { font-family: 'Geist Mono', monospace; font-size: 11.5px; color: #C2BCB6; white-space: nowrap }
.nxi .kit li:last-child { border-bottom: 0 }
.nxi .weeks { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px }
.nxi .weeks span {
	display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-radius: 14px;
	background: #fff; border: 1px solid rgba(14,13,12,.06); font-size: 11px;
	letter-spacing: .12em; text-transform: uppercase; color: var(--mute);
}
.nxi .weeks b { font-family: 'Vocago', serif; font-weight: 400; font-size: 1.2rem; color: var(--ink); letter-spacing: 0 }
.nxi .weeks span.go { background: var(--ink); color: #A7A29C }
.nxi .weeks span.go b { color: #fff }
.nxi .bento { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows: 260px; gap: 16px }
.nxi .bt { position: relative; border-radius: 24px; overflow: hidden; color: #fff; display: flex; align-items: flex-end }
.nxi .bt:hover { color: #fff }
.nxi .bt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.nxi .bt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.75)) }
.nxi .bt.w2 { grid-column: span 2 }
.nxi .bt.h2x { grid-row: span 2 }
.nxi .bt-c { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; width: 100%; padding: 22px }
.nxi .bt-c small { display: block; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.75) }
.nxi .bt-c b { font-family: 'Vocago', serif; font-weight: 400; font-size: 1.45rem; line-height: 1.15 }
.nxi .bt .circ { border-color: rgba(255,255,255,.3) }
.nxi .ind { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; background: var(--line-d); border: 1px solid var(--line-d); border-radius: 24px; overflow: hidden }
.nxi .ind a { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; min-height: 190px; padding: 26px; background: var(--ink); transition: background .3s }
.nxi .ind a:hover { background: #1E1A17; color: #fff }
.nxi .ind small { font-family: 'Geist Mono', monospace; font-size: 11.5px; color: #8C8179 }
.nxi .ind b { font-family: 'Vocago', serif; font-weight: 400; font-size: 1.45rem; line-height: 1.15 }
.nxi .ind .row { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px }
.nxi .ind a.on { background: #2A2320 }
@media (max-width: 1080px) {
	.nxi .i-in { grid-template-columns: minmax(0,1fr); padding: 36px }
	.nxi .i-hero { min-height: 0 }
	.nxi .bento { grid-template-columns: repeat(2,minmax(0,1fr)) }
	.nxi .ind { grid-template-columns: repeat(2,minmax(0,1fr)) }
	.nxi .weeks { grid-template-columns: repeat(3,minmax(0,1fr)) }
}
@media (max-width: 760px) {
	.nxi .bento, .nxi .ind { grid-template-columns: minmax(0,1fr) }
	.nxi .bt.w2 { grid-column: span 1 }
	.nxi .weeks { grid-template-columns: repeat(2,minmax(0,1fr)) }
	.nxi .i-in { padding: 24px }
}

/* ------------------------------------------- service pages, design pass 2 */
/* Category: dark "Built for the UAE" cards and related categories.
   Sub-category: split hero, product cards, dark timeline, sibling cards.
   Service: numbered step cards. Values follow the per-page designs. */

.nxp .s-hero { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 64px; align-items: center; margin-top: 30px }
.nxp .s-hero .sub { margin-top: 24px }
.nxp .s-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px }
.nxp .s-ticks { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 30px; font-size: 14px; color: var(--mute) }
.nxp .s-ticks span { display: inline-flex; align-items: center; gap: 8px }
.nxp .s-ticks svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.nxp .s-art { position: relative; aspect-ratio: 1/1.05; border-radius: 32px; overflow: hidden; background: #E7E5E1 }
.nxp .s-art img { width: 100%; height: 100%; object-fit: cover }
.nxp .s-art .chip { position: absolute; left: 20px; bottom: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; background: rgba(20,17,15,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff }
.nxp .s-art .chip b { font-weight: 500; font-size: 14.5px }
.nxp .s-art .chip span { font-family: 'Geist Mono', monospace; font-size: 12px; color: #CFC8C1 }

.nxp .prods { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 20px }
.nxp .pc { grid-column: span 2; display: flex; flex-direction: column; background: #fff; border-radius: 24px; overflow: hidden; border: 1px solid rgba(14,13,12,.06); transition: box-shadow .35s, transform .35s }
.nxp .pc.wide { grid-column: span 3 }
.nxp .pc:hover { transform: translateY(-4px); box-shadow: 0 34px 70px -40px rgba(0,0,0,.4) }
.nxp .pc-img { position: relative; aspect-ratio: 16/11; overflow: hidden; background: #E7E5E1 }
.nxp .pc-img img { width: 100%; height: 100%; object-fit: cover }
.nxp .pc-b { padding: 22px 22px 0; display: flex; flex-direction: column; gap: 6px; flex: 1 }
.nxp .pc-b h3 { font-family: 'Vocago', serif; font-weight: 400; font-size: 1.5rem; line-height: 1.15 }
.nxp .pc-b p { font-size: 14px; color: var(--mute) }
.nxp .pc-f { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px 22px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase }

.nxp .dk .intro .sub { color: #B9B4AE }
.nxp .tl { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 20px; margin-top: 20px }
.nxp .tl-line { position: absolute; left: 0; right: 0; top: 27px; height: 1px; background: rgba(255,255,255,.2) }
.nxp .tl-st { position: relative; display: flex; flex-direction: column; gap: 14px }
.nxp .tl-st .n { width: 56px; height: 56px; border-radius: 99px; background: #1E1A17; border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; font-family: 'Vocago', serif; font-size: 1.3rem; color: var(--accent) }
.nxp .tl-st h3 { font-family: 'Vocago', serif; font-weight: 400; font-size: 1.35rem; line-height: 1.2; margin-top: 6px }
.nxp .tl-st p { font-size: 14.5px; line-height: 1.75; color: #C4BEB8 }
.nxp .tl-st a, .nxp .dk .close-l a { color: #fff; text-decoration: underline; text-decoration-color: rgba(217,119,63,.7); text-underline-offset: 4px }
.nxp .dk .honest { margin-top: 48px; background: #1E1A17; border-color: var(--line-d); color: #E1DCD6 }
.nxp .dk .close-l { color: #C4BEB8 }

.nxp .sibs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px }
.nxp .sib { display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 22px; background: #fff; border: 1px solid rgba(14,13,12,.06); transition: border-color .25s }
.nxp .sib:hover { border-color: var(--ink) }
.nxp .sib-img { width: 96px; height: 96px; border-radius: 16px; overflow: hidden; flex: none; background: #E7E5E1 }
.nxp .sib-img img { width: 100%; height: 100%; object-fit: cover }
.nxp .sib b { display: block; font-weight: 500; font-size: 15.5px }
.nxp .sib span { font-size: 13px; color: var(--mute) }
.nxp .sib .circ { margin-left: auto }

/* Service steps: the design pairs each step with its own photo. We hold one
   photo per service, so the cards run text-only with the heading on the left. */
.nxp .made { display: flex; flex-direction: column; gap: 26px }
.nxp .mk { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center; padding: 28px; border-radius: 30px; background: #fff; border: 1px solid rgba(14,13,12,.06) }
.nxp .mk-t { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: start; padding: 40px }
.nxp .mk-h { display: flex; flex-direction: column; gap: 14px }
.nxp .mk .n { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--accent) }
.nxp .mk h3 { font-family: 'Vocago', serif; font-weight: 400; font-size: 2rem; line-height: 1.15 }
.nxp .mk-b { display: flex; flex-direction: column; gap: 14px; padding-right: 20px }
.nxp .mk-b p { font-size: 16.5px; line-height: 1.85; color: #4E4540 }
.nxp .mk-b a { text-decoration: underline; text-decoration-color: rgba(217,119,63,.6); text-underline-offset: 4px }
.nxp .mk-foot { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; margin-top: 26px; align-items: center }
.nxp .mk-foot .honest { margin-top: 0 }

.nxp .cond { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px }
.nxp .cd { padding: 30px; border-radius: 24px; background: #1E1A17; border: 1px solid var(--line-d); display: flex; flex-direction: column; gap: 14px }
.nxp .cd svg { width: 30px; height: 30px; fill: none; stroke: var(--accent); stroke-width: 1.4 }
.nxp .cd b { font-family: 'Vocago', serif; font-weight: 400; font-size: 1.5rem }
.nxp .cd p { font-size: 14.5px; color: #B9B4AE; line-height: 1.7 }
.nxp .cd .pills { display: flex; flex-wrap: wrap; gap: 6px }
.nxp .cd .pills span { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); color: #E1DCD6 }

.nxp-cat .rel { grid-template-columns: repeat(3,minmax(0,1fr)) }
.nxp .rl { position: relative; aspect-ratio: 4/3.2; border-radius: 24px; overflow: hidden; color: #fff; display: flex; align-items: flex-end; background: #2A2623 }
.nxp .rl:hover { color: #fff }
.nxp .rl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.nxp .rl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.72)) }
.nxp .rl-c { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; width: 100%; padding: 24px }
.nxp .rl-c small { display: block; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.75) }
.nxp .rl-c b { font-family: 'Vocago', serif; font-weight: 400; font-size: 1.6rem }
.nxp .rl .circ { border-color: rgba(255,255,255,.3) }

@media (max-width: 1080px) {
	.nxp .s-hero { grid-template-columns: minmax(0,1fr) }
	.nxp .prods { grid-template-columns: repeat(2,minmax(0,1fr)) }
	.nxp .pc, .nxp .pc.wide { grid-column: span 1 }
	.nxp .tl { grid-template-columns: minmax(0,1fr) !important }
	.nxp .tl-line { display: none }
	.nxp .sibs, .nxp .mk, .nxp .mk-t, .nxp .mk-foot, .nxp .cond, .nxp-cat .rel { grid-template-columns: minmax(0,1fr) }
	.nxp .mk { gap: 20px }
}
@media (max-width: 760px) {
	.nxp .prods { grid-template-columns: minmax(0,1fr) }
	.nxp .mk, .nxp .mk-t { padding: 22px }
	.nxp .mk-b { padding-right: 0 }
}

/* ---------------------------------------------------------------- policies */

.nxg-legal .l-hero { padding: 56px 0 50px }
.nxg-legal .l-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-top: 30px; padding-bottom: 40px; border-bottom: 1px solid var(--line) }
.nxg-legal .l-h1 { font-family: 'Vocago', Georgia, serif; font-weight: 400; text-transform: uppercase; line-height: 1.08; font-size: clamp(2.4rem, 4.6vw, 4.2rem) }
.nxg-legal .l-h1 em { font-style: normal; color: var(--soft) }
.nxg-legal .l-meta { display: flex; gap: 28px; font-size: 13px; color: var(--mute) }
.nxg-legal .l-meta b { display: block; font-weight: 500; color: var(--ink); font-size: 14.5px }
.nxg-legal .l-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 80px; align-items: start; padding-top: 50px; padding-bottom: 120px }
.nxg-legal .side { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 6px }
.nxg-legal .side small { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: #8A7E74; margin-bottom: 8px }
.nxg-legal .pol { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; color: var(--mute); transition: background .25s, color .25s }
.nxg-legal .pol i { width: 38px; height: 38px; border-radius: 99px; border: 1px solid var(--line); display: grid; place-items: center; font-style: normal; font-family: 'Geist Mono', monospace; font-size: 11.5px; flex: none; transition: .25s }
.nxg-legal .pol b { font-weight: 500; font-size: 15px; display: block }
.nxg-legal .pol span span { display: block; font-size: 12px; color: #A49D98 }
.nxg-legal .pol:hover { background: #fff; color: var(--ink) }
.nxg-legal .pol.on { background: var(--ink); color: #fff }
.nxg-legal .pol.on i { background: var(--accent); border-color: var(--accent); color: #fff }
.nxg-legal .side .note { margin-top: 18px; padding: 20px; border-radius: 20px; background: #fff; border: 1px solid rgba(14, 13, 12, .06); font-size: 13.5px; line-height: 1.6; color: var(--mute) }
.nxg-legal .side .note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px }
.nxg-legal .doc { max-width: 760px }
.nxg-legal .doc .kicker { font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent-ink) }
.nxg-legal .doc h2.t { font-family: 'Vocago', serif; font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.1; margin: 12px 0 18px }
.nxg-legal .doc .intro { font-size: 18px; line-height: 1.85; color: #2E2824; padding-bottom: 30px; border-bottom: 1px solid var(--line) }
.nxg-legal .cl { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 30px 0; border-bottom: 1px solid var(--line) }
.nxg-legal .cl .n { font-family: 'Vocago', serif; font-size: 1.6rem; line-height: 1.2; color: var(--soft) }
.nxg-legal .cl h3 { font-family: 'Vocago', serif; font-weight: 400; text-transform: uppercase; font-size: 1.35rem; line-height: 1.2; margin-bottom: 10px }
.nxg-legal .cl-b { font-size: 16px; line-height: 1.85; color: #4E4540 }
.nxg-legal .cl-b > * + * { margin-top: 12px }
.nxg-legal .cl-b ul, .nxg-legal .cl-b ol { padding-left: 20px }
.nxg-legal .cl-b li + li { margin-top: 6px }
.nxg-legal .cl-b strong { color: var(--ink); font-weight: 600 }
.nxg-legal .cl-b a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px }
.nxg-legal .cl-b table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5 }
.nxg-legal .cl-b th { text-align: left; font-weight: 500; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); padding: 0 12px 10px 0; border-bottom: 1px solid var(--line) }
.nxg-legal .cl-b td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top }
@media (max-width: 1080px) {
	.nxg-legal .l-body { grid-template-columns: minmax(0, 1fr); gap: 40px }
	.nxg-legal .side { position: relative; top: 0 }
}
@media (max-width: 760px) {
	.nxg-legal .cl { grid-template-columns: minmax(0, 1fr); gap: 6px }
	.nxg-legal .cl-b { overflow-x: auto }
}

.nxg-contact .c-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 80px }
.nxg-contact .c-faq-h { display: flex; flex-direction: column; gap: 16px }
@media (max-width: 1080px) { .nxg-contact .c-faq { grid-template-columns: minmax(0, 1fr); gap: 32px } }

.nxg-about .fl-c b { font-size: 1.6rem }
.nxg-about .fl-c p { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.8); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s }
.nxg-about .fl:hover .fl-c p, .nxg-about .fl:focus-within .fl-c p, .nxg-about .fl:focus .fl-c p { max-height: 120px; opacity: 1 }
@media (hover: none) { .nxg-about .fl-c p { max-height: none; opacity: 1 } }
.nxg-about .corp-r .h2 { margin-top: -6px }
.nxg-about .corp-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px }
.nxg-about .corp-more > div { padding: 28px; border-radius: 24px; background: #fff; border: 1px solid rgba(14,13,12,.06) }
.nxg-about .corp-more h3 { font-family: 'Vocago', serif; font-weight: 400; font-size: 1.25rem; line-height: 1.2; text-transform: uppercase; margin-bottom: 10px }
.nxg-about .corp-more p { font-size: 14.5px; line-height: 1.7; color: var(--mute) }
@media (max-width: 1080px) { .nxg-about .corp-more { grid-template-columns: minmax(0, 1fr) } }

/* -------------------------------------------------------------------- blog */
/* Lifted from the Blog and BlogPost designs, scoped per page type. */

/* Blog */
.nxb-index .b-hero { padding:56px 0 50px }
.nxb-index .b-top { display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px;align-items:end;margin-top:30px }
.nxb-index .search { display:flex;align-items:center;gap:12px;height:60px;padding:0 8px 0 22px;border-radius:999px;background:#fff;border:1px solid var(--line);margin-top:24px }
.nxb-index .search svg { width:18px;height:18px;fill:none;stroke:var(--mute);stroke-width:1.7;flex:none }
.nxb-index .search input { flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:15.5px }
.nxb-index .search kbd { font-family:'Geist Mono',monospace;font-size:11px;padding:6px 10px;border-radius:8px;background:var(--ground);color:var(--mute) }
.nxb-index .cats { display:flex;gap:8px;flex-wrap:wrap;padding-bottom:34px;border-bottom:1px solid var(--line);margin-bottom:44px }
.nxb-index .cat { height:44px;padding:0 18px!important;border-radius:999px;border:1px solid var(--line)!important;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);transition:.25s;display:inline-flex!important;align-items:center;gap:8px }
.nxb-index .cat span { font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0;color:#A49D98 }
.nxb-index .cat:hover { color:var(--ink);border-color:var(--ink)!important }
.nxb-index .cat.on { background:var(--ink);color:#fff;border-color:var(--ink)!important }
.nxb-index .feat { display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:0;border-radius:32px;overflow:hidden;background:var(--ink);color:#fff;margin-bottom:56px }
.nxb-index .feat:hover { color:#fff }
.nxb-index .feat-img { position:relative;min-height:520px;overflow:hidden }
.nxb-index .feat-img img { position:absolute;inset:0 }
.nxb-index .feat-b { padding:48px 44px;display:flex;flex-direction:column;gap:20px }
.nxb-index .tagrow { display:flex;gap:10px;align-items:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#A7A29C }
.nxb-index .tagrow b { font-weight:500;color:var(--accent) }
.nxb-index .feat-b h2 { font-family:'Vocago',serif;font-weight:400;font-size:clamp(1.9rem,2.8vw,2.6rem);line-height:1.12;text-transform:uppercase }
.nxb-index .feat-b p { font-size:16px;line-height:1.8;color:#B9B4AE }
.nxb-index .feat-b .meta { margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:24px;border-top:1px solid var(--line-d) }
.nxb-index .au { display:flex;align-items:center;gap:12px;font-size:13.5px;color:#CFC9C3 }
.nxb-index .au i { width:40px;height:40px;border-radius:99px;background:#3A322D;display:grid;place-items:center;font-style:normal;font-family:'Vocago',serif;font-size:14px;color:#fff }
.nxb-index .feat .circ { border-color:rgba(255,255,255,.25) }
.nxb-index .feat.card-h:hover .circ { background:#fff;color:var(--ink);border-color:#fff }
.nxb-index .posts { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px }
.nxb-index .post { display:flex;flex-direction:column;gap:18px }
.nxb-index .post-img { position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:#E7E5E1 }
.nxb-index .post-img .rt { position:absolute;left:14px;top:14px;height:28px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.92);display:inline-flex;align-items:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase }
.nxb-index .post h3 { font-family:'Vocago',serif;font-weight:400;font-size:1.45rem;line-height:1.18;text-transform:uppercase;transition:color .25s }
.nxb-index .post:hover h3 { color:#5A4F47 }
.nxb-index .post p { font-size:14.5px;line-height:1.7;color:var(--mute) }
.nxb-index .post .tagrow { color:#8A7E74 }
.nxb-index .more { display:flex;justify-content:center;margin-top:60px }
.nxb-index .news { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center }
.nxb-index .nf { display:flex;gap:8px;padding:8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14) }
.nxb-index .nf input { flex:1;min-width:0;border:0;outline:0;background:transparent;padding:0 18px;color:#fff;font-size:15px }
.nxb-index .nf input::placeholder { color:#8C8179 }
.nxb-index .news small { display:block;font-size:13px;color:#8C8179;margin-top:14px }
@media (max-width:1080px) {
	.nxb-index .b-top, .nxb-index .feat, .nxb-index .news { grid-template-columns:minmax(0,1fr) }
	.nxb-index .feat-img { min-height:340px }
	.nxb-index .posts { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:760px) {
	.nxb-index .posts { grid-template-columns:minmax(0,1fr) }
	.nxb-index .feat-b { padding:28px }
}
/* BlogPost */
.nxb-post .a-hero { padding:56px 0 0 }
.nxb-post .a-head { max-width:980px;margin:34px auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px }
.nxb-post .tagrow { display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8A7E74 }
.nxb-post .tagrow b { font-weight:500;color:var(--accent) }
.nxb-post .a-h1 { font-family:'Vocago',Georgia,serif;font-weight:400;text-transform:uppercase;line-height:1.08;font-size:clamp(2.2rem,4.4vw,4rem) }
.nxb-post .a-h1 em { font-style:normal;color:var(--soft) }
.nxb-post .a-dek { font-size:19px;line-height:1.75;color:#4E4540;max-width:720px }
.nxb-post .byline { display:flex;align-items:center;gap:14px;font-size:14px;color:var(--mute) }
.nxb-post .byline i { width:44px;height:44px;border-radius:99px;background:var(--ink);color:#fff;display:grid;place-items:center;font-style:normal;font-family:'Vocago',serif;font-size:14px }
.nxb-post .byline b { font-weight:500;color:var(--ink) }
.nxb-post .a-cover { margin-top:56px;border-radius:32px;overflow:hidden;aspect-ratio:21/9 }
.nxb-post .a-cover img { width:100%;height:100%;object-fit:cover }
.nxb-post .a-body { display:grid;grid-template-columns:220px minmax(0,1fr) 260px;gap:64px;align-items:start;padding:80px 0 40px }
.nxb-post .toc { position:sticky;top:130px;display:flex;flex-direction:column;gap:14px }
.nxb-post .toc small { font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#8A7E74 }
.nxb-post .toc ol { list-style:none;display:grid;border-left:1px solid var(--line) }
.nxb-post .toc a { display:block;padding:8px 0 8px 18px;margin-left:-1px;border-left:1px solid transparent;font-size:14px;line-height:1.45;color:var(--mute);transition:.2s }
.nxb-post .toc a:hover { color:var(--ink) }
.nxb-post .toc a.on { color:var(--ink);border-left-color:var(--accent) }
.nxb-post .prose { max-width:720px }
.nxb-post .prose>p { font-size:18px;line-height:1.9;color:#2E2824;margin-bottom:24px }
.nxb-post .prose>p.lead::first-letter { font-family:'Vocago',serif;float:left;font-size:4.4rem;line-height:.9;padding:6px 12px 0 0;color:var(--ink) }
.nxb-post .prose h2 { font-family:'Vocago',serif;font-weight:400;text-transform:uppercase;font-size:clamp(1.7rem,2.4vw,2.2rem);line-height:1.15;margin:56px 0 18px;scroll-margin-top:130px }
.nxb-post .prose h2 em { font-style:normal;color:var(--soft) }
.nxb-post .prose a { text-decoration:underline;text-decoration-color:rgba(217,119,63,.6);text-underline-offset:4px }
.nxb-post .mat { display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:center;padding:20px;border-radius:24px;background:#fff;border:1px solid rgba(14,13,12,.06);margin:8px 0 28px }
.nxb-post .mat .im { aspect-ratio:1/1;border-radius:16px;overflow:hidden }
.nxb-post .mat .im img { width:100%;height:100%;object-fit:cover }
.nxb-post .mat dl { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px }
.nxb-post .mat dt { font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#8A7E74 }
.nxb-post .mat dd { font-size:15px;margin-top:2px }
.nxb-post .pull { margin:44px 0;padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:'Vocago',serif;font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.25;text-transform:uppercase }
.nxb-post .pull em { font-style:normal;color:var(--soft) }
.nxb-post .tbl { width:100%;border-collapse:collapse;margin:10px 0 30px;font-size:15px;background:#fff;border-radius:22px;overflow:hidden }
.nxb-post .tbl th, .nxb-post .tbl td { padding:15px 18px;text-align:left;border-bottom:1px solid var(--line) }
.nxb-post .tbl thead th { background:var(--ink);color:#fff;font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase }
.nxb-post .tbl tbody th { font-weight:500;color:var(--mute);font-size:13px;letter-spacing:.06em }
.nxb-post .tbl tr:last-child th, .nxb-post .tbl tr:last-child td { border-bottom:0 }
.nxb-post .dot { display:inline-flex;gap:4px }
.nxb-post .dot i { width:8px;height:8px;border-radius:99px;background:#E2DCD6 }
.nxb-post .dot i.f { background:var(--accent) }
.nxb-post .keys { margin-top:40px;padding:30px;border-radius:24px;background:#EDE8E2 }
.nxb-post .keys h3 { font-family:'Vocago',serif;font-weight:400;text-transform:uppercase;font-size:1.3rem;margin-bottom:14px }
.nxb-post .keys ul { list-style:none;display:grid;gap:10px }
.nxb-post .keys li { display:flex;gap:12px;font-size:15.5px;line-height:1.6 }
.nxb-post .keys li::before { content:"";width:6px;height:6px;border-radius:99px;background:var(--accent);flex:none;margin-top:10px }
.nxb-post .aside { position:sticky;top:130px;display:flex;flex-direction:column;gap:16px }
.nxb-post .cta-card { border-radius:26px;overflow:hidden;background:var(--ink);color:#fff }
.nxb-post .cta-card .im { aspect-ratio:4/3;overflow:hidden }
.nxb-post .cta-card .im img { width:100%;height:100%;object-fit:cover }
.nxb-post .cta-card .b { padding:22px;display:flex;flex-direction:column;gap:12px }
.nxb-post .cta-card small { font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#A7A29C }
.nxb-post .cta-card b { font-family:'Vocago',serif;font-weight:400;font-size:1.3rem;line-height:1.2;text-transform:uppercase }
.nxb-post .cta-card .btn { min-height:46px;padding:0 20px }
.nxb-post .share { display:flex;gap:8px;align-items:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8A7E74 }
.nxb-post .share a { width:40px;height:40px;border-radius:99px;border:1px solid var(--line);display:grid;place-items:center;transition:.2s }
.nxb-post .share a:hover { background:var(--ink);color:#fff;border-color:var(--ink) }
.nxb-post .share svg { width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7 }
.nxb-post .rel { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px }
.nxb-post .post { display:flex;flex-direction:column;gap:16px }
.nxb-post .post-img { aspect-ratio:4/3;border-radius:22px;overflow:hidden }
.nxb-post .post h3 { font-family:'Vocago',serif;font-weight:400;font-size:1.4rem;line-height:1.18;text-transform:uppercase }
.nxb-post .post .tg { font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8A7E74 }
@media (max-width:1180px) {
	.nxb-post .a-body { grid-template-columns:200px minmax(0,1fr) }
	.nxb-post .aside { display:none }
}
@media (max-width:900px) {
	.nxb-post .a-body { grid-template-columns:minmax(0,1fr) }
	.nxb-post .toc { position:relative;top:0 }
	.nxb-post .rel { grid-template-columns:minmax(0,1fr) }
	.nxb-post .mat { grid-template-columns:minmax(0,1fr) }
	.nxb-post .a-cover { aspect-ratio:4/3 }
}

.nxb .ph, .nxb .post-img img, .nxb .feat-img img { width: 100%; height: 100%; object-fit: cover }
.nxb-index .feat-img { background: #2A2623 }
.nxb-index .search input { font: inherit; font-size: 15.5px; color: var(--ink) }
.nxb .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.nxb-index .b-empty { max-width: 760px; padding: 56px; border-radius: 32px; background: #fff; border: 1px solid rgba(14, 13, 12, .06); display: flex; flex-direction: column; gap: 18px }
.nxb-index .b-empty .btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px }
.nxb-post .prose > ul, .nxb-post .prose > ol { margin: 0 0 24px 22px; font-size: 18px; line-height: 1.8; color: #2E2824 }
.nxb-post .prose h3 { font-family: 'Vocago', serif; font-weight: 400; text-transform: uppercase; font-size: 1.35rem; line-height: 1.2; margin: 36px 0 12px }
.nxb-post .prose img { border-radius: 22px; margin: 10px 0 28px }
@media (max-width: 760px) { .nxb-index .b-empty { padding: 28px } }

/* Inner-page designs: section headings cap at 760px (so a side note sits
   beside them) and round arrow buttons are 42px with a 15px arrow. */
body:not(.home) .nx .head-l { gap: 16px; max-width: 760px }
body:not(.home) .nx .circ { width: 42px; height: 42px }
body:not(.home) .nx .circ svg { width: 15px; height: 15px }
body:not(.home) .nx .ab .circ { width: 36px; height: 36px }
.nx.fin:not(.fin-home) .wordmark { padding-top: 0 }

/* ------------------------------------------- service page, design pass 3 */
/* Option picker (fed by the printhub-core service options), spec table,
   artwork guide and "complete the order" cards, from the service design. */

.nxp .cfg-enq { display: flex; flex-direction: column; gap: 22px }
.nxp .cfg-opts { display: flex; flex-direction: column; gap: 20px; margin: 0 }
.nxp .opt { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line) }
.nxp .opt-row { flex-direction: row; justify-content: space-between; align-items: center; gap: 16px }
.nxp .opt-row .opt-h { flex-direction: column; gap: 2px }
.nxp .opt-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px }
.nxp .opt-h b { font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: uppercase }
.nxp .opt-h span { font-size: 13px; color: var(--mute) }
.nxp .opts { display: flex; flex-wrap: wrap; gap: 8px }
.nxp .o { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 120px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s }
.nxp .o.o-sm { min-width: 0; padding: 10px 16px }
.nxp .o input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none }
.nxp .o b { font-weight: 500; font-size: 14.5px }
.nxp .o small { font-size: 12px; color: var(--mute) }
.nxp .o:hover { border-color: var(--ink) }
.nxp .o:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink) }
.nxp .o:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px }
.nxp .opt-other, .nxp .opt-size input, .nxp .qty input { height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 14.5px; color: var(--ink) }
.nxp .opt-other { width: 140px }
.nxp .opt-size { display: flex; align-items: center; gap: 10px }
.nxp .opt-size input { width: 120px }
.nxp .opt-size > span { color: var(--mute) }
.nxp .qty { display: flex; align-items: center; gap: 6px }
.nxp .qty button { width: 42px; height: 42px; border-radius: 99px; border: 1px solid var(--line); background: #fff; font-size: 18px; line-height: 1 }
.nxp .qty button:hover { border-color: var(--ink) }
.nxp .qty input { width: 76px; text-align: center; -moz-appearance: textfield }
.nxp .qty input::-webkit-outer-spin-button, .nxp .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.nxp .opt-turn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px }
.nxp .opt-turn i { width: 8px; height: 8px; border-radius: 99px; background: #3C9A5F }
.nxp .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

.nxp .specs { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px; align-items: start }
.nxp .spec-t { margin: 0; border-radius: 26px; background: #fff; border: 1px solid rgba(14, 13, 12, .06); overflow: hidden }
.nxp .spec-t div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding: 18px 26px; border-bottom: 1px solid var(--line) }
.nxp .spec-t div:last-child { border-bottom: 0 }
.nxp .spec-t dt { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute) }
.nxp .spec-t dd { margin: 0; font-size: 15px }
.nxp .box { border-radius: 26px; background: var(--ink); color: #fff; padding: 30px; display: flex; flex-direction: column; gap: 18px }
.nxp .box .eyebrow { color: #A7A29C }
.nxp .box h3 { font-family: 'Vocago', serif; font-weight: 400; font-size: 1.7rem; line-height: 1.15 }
.nxp .box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px }
.nxp .box li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: #E1DCD6 }
.nxp .box li svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; margin-top: 3px }

.nxp .art { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: center }
.nxp .diag { position: relative; display: flex; justify-content: center; padding: 30px 150px 30px 30px; border-radius: 30px; background: #fff; border: 1px solid rgba(14, 13, 12, .06) }
.nxp .ru { position: relative; width: 200px; height: 440px }
.nxp .ru-top { position: absolute; left: -8px; right: -8px; top: 0; height: 10px; border-radius: 4px; background: #2B2622 }
.nxp .ru-g { position: absolute; left: 0; right: 0; top: 10px; bottom: 46px; background: linear-gradient(180deg, #F1EBE4, #E7DED4); border: 1px dashed rgba(14, 13, 12, .25) }
.nxp .ru-safe { position: absolute; left: 14px; right: 14px; top: 24px; bottom: 110px; border: 1.5px solid var(--accent); border-radius: 4px }
.nxp .ru-eye { position: absolute; left: 14px; right: 14px; top: 24px; height: 120px; background: rgba(217, 119, 63, .14); border-radius: 4px }
.nxp .ru-hide { position: absolute; left: 0; right: 0; bottom: 46px; height: 60px; background: repeating-linear-gradient(45deg, rgba(14, 13, 12, .08) 0 6px, transparent 6px 12px) }
.nxp .ru-base { position: absolute; left: -14px; right: -14px; bottom: 0; height: 46px; border-radius: 10px; background: #2B2622 }
.nxp .lab { position: absolute; font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--mute); white-space: nowrap }
.nxp .lab b { color: var(--ink); font-weight: 500 }
.nxp .art-img { position: relative; aspect-ratio: 4 / 4.4; border-radius: 30px; overflow: hidden; background: #E7E5E1 }
.nxp .art-img img { width: 100%; height: 100%; object-fit: cover }
.nxp .art-chip { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: rgba(20, 17, 15, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff }
.nxp .art-chip b { font-weight: 500; font-size: 14px }
.nxp .art-chip span { font-family: 'Geist Mono', monospace; font-size: 11.5px; color: #CFC8C1 }
.nxp .tips { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line) }
.nxp .tips li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line) }
.nxp .tips .k { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--accent-ink); padding-top: 3px }
.nxp .tips b { display: block; font-weight: 500; font-size: 16px }
.nxp .tips span { font-size: 14.5px; color: var(--mute); line-height: 1.65 }
.nxp .dl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px }

@media (max-width: 1080px) {
	.nxp .specs, .nxp .art { grid-template-columns: minmax(0, 1fr); gap: 32px }
	.nxp .spec-t div { grid-template-columns: minmax(0, 1fr); gap: 4px }
}
@media (max-width: 760px) {
	.nxp .diag { padding: 24px 130px 24px 16px; overflow: hidden }
	.nxp .opt-row { flex-direction: column; align-items: flex-start }
}

/* Homepage eyebrows are flex rows in the design (its accent square is switched off). */
.nxh .eyebrow { display: flex; align-items: center; gap: 10px }
.nxh .fin-top .eyebrow, .nxh .hero-copy .eyebrow { justify-content: center }
.nx.fin-home .eyebrow { display: flex; align-items: center; gap: 10px }

/* ------------------------------------------------------- footer on phones */
/* Two-column links, slimmer contact cards, a wordmark that fits the screen
   and bottom links tall enough to tap. */
@media (max-width: 760px) {
	.nx.fin .fin-top,
	.nx.fin:not(.fin-home) .fin-top { padding-top: 88px; padding-bottom: 48px; gap: 20px }
	.nx.fin .contacts { gap: 10px; padding-bottom: 48px }
	.nx.fin .ct,
	.nx.fin:not(.fin-home) .ct { padding: 18px 20px; gap: 6px; border-radius: 18px }
	.nx.fin .ct b,
	.nx.fin:not(.fin-home) .ct b { font-size: 1.15rem }
	.nx.fin .ct span { font-size: 13px }
	.nx.fin .ct .circ { width: 34px; height: 34px }
	.nx.fin .links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; padding: 40px 0 }
	.nx.fin .links > div:first-child { grid-column: 1 / -1 }
	.nx.fin .links img { height: 60px; margin-bottom: 14px }
	.nx.fin .links h6 { margin-bottom: 10px }
	.nx.fin .flink { padding: 7px 0; font-size: 14px }
	.nx .wordmark { font-size: 11vw }
	.nx.mini-f-mini .wordmark { padding-top: 40px }
	.nx .bot div, .nx.mini-f nav { gap: 6px 22px; flex-wrap: wrap }
	.nx .bot div a, .nx.mini-f nav a { display: inline-flex; align-items: center; min-height: 44px }
	.nx .bot { padding: 18px 0 24px }
}

/* ------------------------------------------------------- header on phones */
/* The call button replaces the header's WhatsApp icon below 1080px (the
   floating WhatsApp button already covers that). In the menu: categories in
   two columns, the current page marked, and the quote button pinned to the
   bottom so it never needs a long scroll. */
.nx .hd-call { display: none }
@media (max-width: 1080px) {
	.nx .hd-call { display: grid }
	.nx .hd-wa { display: none }
}
.nx-drawer-open .nx-wa { display: none }
.nx .drawer .sub-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px }
.nx .drawer .sub-list a { padding: 10px 0 }
.nx .drawer a.on { color: #fff }
.nx .drawer .sub-list a.on::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 99px; background: var(--accent); vertical-align: middle }
.nx .drawer nav > ul > li > a.on { color: var(--accent) }
.nx .drawer .drawer-cta {
	position: sticky;
	bottom: -40px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 22px -22px -40px;
	padding: 18px 22px 24px;
	background: linear-gradient(180deg, rgba(14, 13, 12, 0), rgba(14, 13, 12, .98) 22%);
}
.nx .drawer .drawer-cta .btn:first-child { grid-column: 1 / -1 }
.nx .drawer .drawer-cta .btn { min-height: 48px; padding: 0 12px }

/* Very narrow phones: let long button labels wrap instead of pushing the page sideways. */
.nx .btn { max-width: 100% }
@media (max-width: 400px) {
	.nx .btn { white-space: normal; text-align: center; line-height: 1.4; padding-top: 10px; padding-bottom: 10px }
}

/* ------------------------------------------------------- phones, all pages */
/* The enquiry form's field labels ship at 9.5px from the plugin; too small anywhere. */
.nx .ph-field > span { font-size: 11px }

@media (max-width: 760px) {
	/* 16px stops iPhones zooming the page when a field is tapped. */
	.nx input:not([type=radio]):not([type=checkbox]):not([type=file]),
	.nx select,
	.nx textarea,
	.nxg .fld input, .nxg .fld select, .nxg .fld textarea,
	.nx.nxg-quote .ph-field input, .nx.nxg-quote .ph-field select, .nx.nxg-quote .ph-field textarea { font-size: 16px }

	/* Tap targets: breadcrumbs, industry kit links, FAQ topic chips, blog search. */
	.nx .crumb a { display: inline-flex; align-items: center; min-height: 40px }
	.nx .crumb { row-gap: 0 }
	.nxi .kit li { padding: 0 }
	.nxi .kit li a { display: flex; align-items: center; min-height: 44px; flex: 1 }
	.nxi .kit li span { align-self: center }
	.nxg-faqs .pop button { height: 40px }
	.nxb-index .search input { align-self: stretch; height: auto }
	.nxh .locs a { min-height: 40px }
}

/* Phones: the breadcrumb becomes one "‹ parent" back link (the full trail
   stays on larger screens and in the BreadcrumbList schema), and the service
   photo gets shorter so the heading reaches the first screen. */
@media (max-width: 760px) {
	.nx .crumb > a, .nx .crumb > i, .nx .crumb > b, .nx .crumb > span { display: none }
	.nx .crumb > a:last-of-type { display: inline-flex }
	.nx .crumb > a:last-of-type::before { content: "\2039"; margin-right: 8px; font-size: 18px; line-height: 1; letter-spacing: 0 }
	.nxp .gal-main { aspect-ratio: 4 / 3 }
	.nxp .gal-badge { display: none }
}