/* =====================================================================
   NEW HOME, 11. OUR SERVICES AS TABS (template-parts/nh/offer.php)
   =====================================================================
   The owner's "Our services" comp: heading, five service tabs, a list of
   sub-services beside a detail card, and at right a tilted laptop showing a
   page being built, with three chips, dot patches and handwritten notes.
   The laptop's headline follows the chosen tab.
   Shares tokens with new-hero.css / new-home.css.
   ===================================================================== */

.nx-off__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
	gap: clamp(16px, 1.2vw, 24px);
	align-items: start;
}
.nx-off .nw-title { font-size: clamp(30px, 3.4vw, 64px); }
.nx-off__main .nw-sub { max-width: 44em; }

/* ---- tabs ---- */
.nx-off__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(8px, .68vw, 12px);
	margin: clamp(22px, 1.9vw, 34px) 0 0 -1.2vw;
}
.nx-off__tab {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: clamp(46px, 3vw, 54px);
	padding: 0 clamp(13px, .9vw, 17px);
	border: 1px solid rgba(18, 21, 24, .1);
	border-radius: 12px;
	background: #fff;
	font: 500 clamp(14px, .86vw, 16px) / 1 var(--nh-sans);
	color: var(--nh-ink);
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 10px 24px -20px rgba(18, 21, 24, .4);
	transition: background .25s, color .25s, border-color .25s, transform .25s var(--nh-ease), box-shadow .25s;
}
.nx-off__tab svg { width: 1.3em; flex: none; }
.nx-off__tab:hover { transform: translateY(-2px); border-color: rgba(239, 68, 68, .35); }
.nx-off__tab.is-on {
	color: #fff;
	border-color: transparent;
	background: linear-gradient(180deg, #F35A5F 0%, var(--nh-red-d) 100%);
	box-shadow: 0 14px 28px -14px rgba(239, 68, 68, .8);
}
.nx-off__tab:focus-visible { outline: 2px solid var(--nh-red); outline-offset: 3px; }

/* ---- pane: list + panel ---- */
.nx-off__pane {
	display: grid;
	grid-template-columns: minmax(0, .64fr) minmax(0, 1fr);
	gap: clamp(18px, 1.6vw, 30px);
	margin: clamp(20px, 1.8vw, 32px) 0 0 -1.2vw;
}
.nh-js .nx-off__pane:not(.is-on), .nh-js .nx-off__panel:not(.is-on) { display: none; }
.nx-off__pane + .nx-off__pane { margin-top: 40px; }
.nh-js .nx-off__pane + .nx-off__pane { margin-top: clamp(20px, 1.8vw, 32px); }

.nx-off__list { list-style: none; margin: 0; padding: 0; }
.nx-off__list li + li { border-top: 1px solid rgba(18, 21, 24, .08); }
.nx-off__item {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.2vw, 22px);
	width: 100%;
	min-height: clamp(56px, 3.9vw, 70px);
	padding: 0 clamp(12px, 1vw, 18px) 0 clamp(14px, 1.2vw, 22px);
	border: 0;
	border-radius: 12px;
	background: none;
	font: 500 clamp(15px, 1vw, 17.5px) / 1.3 var(--nh-sans);
	color: #3B4147;
	text-align: left;
	cursor: pointer;
	transition: background .25s, color .25s;
}
.nx-off__item > svg:first-child { flex: none; width: clamp(24px, 1.7vw, 30px); color: #2B3036; transition: color .25s; }
.nx-off__item span { flex: 1; }
.nx-off__chev { flex: none; width: 1.1em; opacity: .7; transition: transform .25s var(--nh-ease); }
.nx-off__item:hover { background: #FAFAFB; }
.nx-off__item:hover .nx-off__chev { transform: translateX(3px); }
.nx-off__item.is-on { background: var(--nh-red-t); color: var(--nh-red); font-weight: 600; }
.nx-off__item.is-on > svg:first-child { color: var(--nh-red); }
.nx-off__list li:has(.is-on) + li, .nx-off__list li:has(+ li .is-on) { border-color: transparent; }
.nx-off__item:focus-visible { outline: 2px solid var(--nh-red); outline-offset: -2px; }

.nx-off__panel {
	padding: clamp(22px, 2.1vw, 40px);
	border-radius: clamp(16px, 1.2vw, 22px);
	background: linear-gradient(165deg, #FFFFFF 50%, #FAFAFB 100%);
	border: 1px solid rgba(18, 21, 24, .08);
	animation: nx-offin .5s var(--nh-ease);
}
@keyframes nx-offin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.nx-off__kicker { margin: 0; font-size: clamp(11.5px, .78vw, 14px); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #6A7178; }
.nx-off__panel h3 { margin: 10px 0 0; font-family: var(--nh-head); font-size: clamp(22px, 1.75vw, 32px); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; color: var(--nh-ink); }
.nx-off__panel h3 a { color: inherit; text-decoration: none; }
.nx-off__panel h3 a:hover { color: var(--nh-red); }
.nx-off__panel > p { margin: 12px 0 0; font-size: clamp(15px, 1.03vw, 18px); line-height: 1.5; color: var(--nh-body); }
.nx-off__panel ul { list-style: none; margin: clamp(14px, 1.2vw, 22px) 0 0; padding: 0; }
.nx-off__panel li { display: flex; align-items: center; gap: 12px; padding: 5px 0; font-size: clamp(15px, 1.03vw, 18px); color: #2B3036; }
.nx-off__panel li svg { flex: none; width: 1.15em; color: var(--nh-red); }
.nx-off__acts { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 1.5vw, 28px); margin-top: clamp(20px, 1.7vw, 30px); }
.nx-off__acts .nh-btn { height: clamp(46px, 3vw, 54px); padding: 0 clamp(20px, 1.6vw, 30px); font-size: clamp(15px, 1vw, 17.5px); }
.nx-off__work { display: inline-flex; align-items: center; gap: 14px; color: var(--nh-ink); }
.nx-off__play {
	display: grid; place-items: center;
	width: clamp(46px, 3.1vw, 56px); aspect-ratio: 1;
	border-radius: 50%;
	background: #fff;
	border: 1px solid rgba(18, 21, 24, .12);
	box-shadow: 0 14px 28px -18px rgba(18, 21, 24, .4);
	transition: background .3s, color .3s, transform .3s var(--nh-ease);
}
.nx-off__play svg { width: 34%; margin-left: 6%; }
.nx-off__work:hover .nx-off__play { background: var(--nh-red); color: #fff; transform: scale(1.06); }
.nx-off__work b { display: block; font-size: clamp(15px, .98vw, 17.5px); font-weight: 600; }
.nx-off__work small { display: block; margin-top: 2px; font-size: clamp(13px, .85vw, 15px); color: #6A7178; }

/* ---- art ---- */
.nx-off__art {
	position: relative;
	margin: 1vw calc(2vw - var(--nh-pad)) 0 -1vw;
	aspect-ratio: 720 / 800;
	container-type: inline-size;
	pointer-events: none;
}
.nx-off__blob { position: absolute; display: block; }
.nx-off__blob--a {
	left: 14%; top: 22%;
	width: 74%; height: 62%;
	border-radius: 52% 48% 44% 56% / 46% 54% 46% 54%;
	background: radial-gradient(70% 70% at 50% 50%, #FCE3E4 0%, #FEF3F3 64%, rgba(255, 255, 255, 0) 100%);
	animation: nx-offmorph 15s ease-in-out infinite;
}
.nx-off__blob--b {
	left: 62%; top: 30%;
	width: 40%; height: 46%;
	border-radius: 58% 42% 50% 50% / 50% 46% 54% 50%;
	background: radial-gradient(closest-side, #ECEDF0, rgba(236, 237, 240, 0));
	animation: nx-offmorph 12s -4s ease-in-out infinite;
}
@keyframes nx-offmorph {
	0%, 100% { border-radius: 52% 48% 44% 56% / 46% 54% 46% 54%; }
	50%      { border-radius: 46% 54% 52% 48% / 54% 44% 56% 46%; }
}
.nx-off__dots { position: absolute; display: block; background: radial-gradient(circle, rgba(18, 21, 24, .16) 1.2px, transparent 1.6px) 0 0 / 2.4cqw 2.4cqw; }
.nx-off__dots--a { left: 4%; top: 40%; width: 24%; height: 44%; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.nx-off__dots--b { left: 80%; top: 8%; width: 20%; height: 40%; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.nx-off__lines { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; }
.nx-off__scribble { fill: none; stroke: #5E6166; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .nx-off__scribble { animation: nh-draw .9s 1.8s var(--nh-ease) forwards; }
.nx-off__burst { fill: none; stroke: var(--nh-red); stroke-width: 3; stroke-linecap: round; }
.nx-off__hand { z-index: 3; font-size: 4.2cqw; }
.nx-off__hand--a { left: 0; top: 13%; transform: rotate(-16deg); transform-origin: left bottom; }
.nx-off__hand--a span:nth-child(2) { padding-left: .3em; }
.nx-off__hand--b { left: 70%; top: 85%; transform: rotate(-14deg); }
.nx-off__hand--b span:nth-child(2) { padding-left: .4em; }
.is-in .nx-off__hand--b { animation-delay: 2s; }

/* laptop, drawn in CSS so its headline can follow the tab */
.nx-olap {
	position: absolute; z-index: 1;
	left: 4%; top: 19%;
	width: 88%;
	transform: perspective(2200px) rotateY(-18deg) rotateX(5deg) rotate(-2.5deg);
	transform-origin: 30% 50%;
	opacity: 0;
}
.is-in .nx-olap { animation: nh-pop 1s .5s var(--nh-ease) forwards; }
.nx-olap__screen {
	display: grid;
	grid-template-columns: 27% 1fr;
	aspect-ratio: 1.58;
	padding: 1.2cqw;
	border-radius: 2.2cqw;
	background: linear-gradient(160deg, #2A2E33, #121518);
	box-shadow: 0 50px 90px -50px rgba(18, 21, 24, .7), inset 0 0 0 1px rgba(255, 255, 255, .08);
	overflow: hidden;
}
.nx-olap__ed {
	display: flex; flex-direction: column;
	gap: 1cqw;
	padding: 0 1cqw 1cqw;
	border-radius: 1.2cqw 0 0 1.2cqw;
	background: #F2F3F5;
	font-size: 1.15cqw;
	color: #4A5056;
	overflow: hidden;
}
.nx-olap__edhead { display: flex; align-items: center; gap: .8cqw; margin: 0 -1cqw; padding: 1.2cqw 1.2cqw; background: #22262B; font-weight: 600; font-size: 1.3cqw; color: #fff; }
.nx-olap__edhead i, .nx-olap__nav i { display: block; width: 3.6cqw; height: 1.8cqw; background: center / contain no-repeat; }
.nx-olap__edhead i { width: 1.8cqw; background-color: #fff; border-radius: .4cqw; background-size: auto 86%; background-position: 10% 50%; }
.nx-olap__search { display: block; height: 2.2cqw; border-radius: .6cqw; background: #fff; box-shadow: inset 0 0 0 1px rgba(18, 21, 24, .08); }
.nx-olap__tools { display: grid; grid-template-columns: 1fr 1fr; gap: .8cqw; }
.nx-olap__tools span { display: grid; justify-items: center; gap: .5cqw; padding: 1cqw .4cqw; border-radius: .7cqw; background: #fff; font-size: 1cqw; text-align: center; box-shadow: 0 0 0 1px rgba(18, 21, 24, .05); }
.nx-olap__tools svg { width: 2.4cqw; color: #3A3F45; }
.nx-olap__page {
	position: relative;
	display: flex; flex-direction: column;
	padding: 1.6cqw 2.2cqw;
	border-radius: 0 1.2cqw 1.2cqw 0;
	background: #fff;
	overflow: hidden;
}
.nx-olap__nav { display: flex; align-items: center; gap: 2.2cqw; font-size: 1.1cqw; color: #6A7178; }
.nx-olap__nav i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background-color: var(--nh-red-t); background-size: auto 86%; background-position: 10% 50%; margin-right: auto; }
.nx-olap__nav b { padding: .8cqw 1.6cqw; border-radius: 99px; background: var(--nh-red); font-weight: 600; color: #fff; }
.nx-olap__hero { position: relative; flex: 1; display: block; padding-top: 4cqw; }
.nx-olap__h { display: block; position: relative; z-index: 1; max-width: 56%; font-family: var(--nh-head); font-size: 3.7cqw; font-weight: 800; line-height: 1.05; letter-spacing: -.04em; color: var(--nh-ink); }
.nx-olap__h span { display: none; }
.nx-olap__h span.is-on { display: block; animation: nx-offin .5s var(--nh-ease); }
.nx-olap__l { display: block; width: 44%; height: .9cqw; margin-top: 1.8cqw; border-radius: 99px; background: #E9EAED; }
.nx-olap__l--s { width: 30%; margin-top: .8cqw; }
.nx-olap__btn { display: inline-block; margin-top: 2cqw; padding: 1cqw 2cqw; border-radius: .8cqw; background: var(--nh-red); font-size: 1.2cqw; font-weight: 600; color: #fff; }
.nx-olap__shape { position: absolute; right: -2%; top: 8%; width: 44%; aspect-ratio: 1.05; border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%; background: linear-gradient(150deg, #FDE7E8, #F6F0F0 60%, #EEEFF1); }
.nx-olap__shape img { position: absolute; left: 10%; top: 12%; width: 80%; height: 76%; object-fit: cover; border-radius: 40% 60% 46% 54% / 50% 42% 58% 50%; box-shadow: 0 2cqw 3cqw -1.8cqw rgba(18, 21, 24, .5); }
.nx-olap__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; margin-top: 1.6cqw; }
.nx-olap__cards span { display: block; height: 6.4cqw; border-radius: .9cqw; background: linear-gradient(160deg, #F5F6F8, #ECEDF0); }
.nx-olap__cards span:nth-child(2) { background: linear-gradient(160deg, #FDEDEE, #F7E4E5); }
.nx-olap__base { display: block; width: 112%; height: 2.6cqw; margin: -.2cqw 0 0 -6%; border-radius: .4cqw .4cqw 3cqw 3cqw; background: linear-gradient(180deg, #E4E6EA 0%, #C9CCD2 60%, #A9ADB4 100%); box-shadow: 0 30px 40px -24px rgba(18, 21, 24, .6); }

.nx-offchip {
	position: absolute; z-index: 4;
	display: flex; align-items: center; gap: 2.2cqw;
	padding: 2.4cqw 3cqw 2.4cqw 2.4cqw;
	border-radius: 2.6cqw;
	background: #fff;
	box-shadow: 0 26px 46px -28px rgba(60, 30, 30, .45), 0 0 0 1px rgba(18, 21, 24, .05);
	opacity: 0;
}
.nx-offchip i { position: relative; display: grid; place-items: center; flex: none; width: 8.4cqw; aspect-ratio: 1; border-radius: 50%; background: var(--nh-red-t); color: var(--nh-red); }
.nx-offchip.is-g i { border-radius: 1.8cqw; background: var(--nh-grey-t); color: #3A3F45; }
.nx-offchip i svg { width: 46%; }
.nx-offchip__ring::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: conic-gradient(var(--nh-red) 0 76%, rgba(239, 68, 68, .16) 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .9cqw), #000 calc(100% - .8cqw));
	mask: radial-gradient(farthest-side, transparent calc(100% - .9cqw), #000 calc(100% - .8cqw));
}
.nx-offchip b { display: block; font-family: var(--nh-head); font-size: 2.6cqw; font-weight: 700; letter-spacing: -.01em; color: var(--nh-ink); }
.nx-offchip small { display: block; max-width: 13em; margin-top: .4cqw; font-size: 2cqw; line-height: 1.35; color: #61686E; }
.nx-offchip--a { left: 52%; top: 1%; }
.nx-offchip--b { left: -4%; top: 66%; }
.nx-offchip--c { left: 64%; top: 60%; }
.is-in .nx-offchip--a { animation: nh-pop .8s 1s var(--nh-ease) forwards, nh-float 7s 2s ease-in-out infinite; }
.is-in .nx-offchip--b { animation: nh-pop .8s 1.15s var(--nh-ease) forwards, nh-float2 6.4s 2.1s ease-in-out infinite; }
.is-in .nx-offchip--c { animation: nh-pop .8s 1.3s var(--nh-ease) forwards, nh-float 6.8s 2.2s ease-in-out infinite; }

/* ---- responsive ---- */
@media (max-width: 1600px) and (min-width: 721px) {
	.nx-off .nx-off__tab svg { display: none; }
}
@media (max-width: 1280px) {
	.nx-off__tabs, .nx-off__pane { margin-left: 0; }
}
@media (max-width: 1279px) {
	.nx-off__grid { grid-template-columns: minmax(0, 1fr); }
	.nx-off__art { margin: 24px auto 0; width: 100%; max-width: 620px; }
}
@media (max-width: 720px) {
	.nx-off__tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 4px 16px 10px; scrollbar-width: none; }
	.nx-off__tabs::-webkit-scrollbar { display: none; }
	.nx-off__tab { flex: none; }
	.nx-off__pane { grid-template-columns: minmax(0, 1fr); }
	.nx-off__acts .nh-btn { flex: 1 1 100%; }
	.nx-off .nx-off__hand { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.nx-olap, .nx-offchip { opacity: 1; }
	.nx-off__scribble { stroke-dashoffset: 0; }
	.nx-off__hand { clip-path: none; }
	.nx-off__panel, .nx-olap__h span.is-on { animation: none; }
}