/* N's Services Grid
   Scoped under .ns-services so it can't leak into the rest of the theme. */

.ns-services{
	--ns-deep:#0E3A5C;
	--ns-dark:#08243B;
	--ns-accent:#7FD4E8;
	--ns-bg:#F4F6F7;
	--ns-card:#FFFFFF;
	--ns-on-dark:#FFFFFF;
	--ns-ink:#14181D;
	--ns-grey:#4B535C;
	--ns-line:#DDE3E7;
	--ns-radius:14px;

	/* Derived from the palette so nothing is hardcoded to the old blue. */
	--ns-shadow:0 16px 40px rgba(0,0,0,.13);
	--ns-shadow-sm:0 10px 26px rgba(0,0,0,.10);
	--ns-shadow-btn:0 6px 18px rgba(0,0,0,.22);
	--ns-sweep:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.38) 48%,rgba(255,255,255,.18) 52%,transparent 65%);

	background:var(--ns-bg);
	color:var(--ns-ink);
	padding:64px 20px 72px;
	font-family:inherit;
	line-height:1.55;
	box-sizing:border-box;
}
.ns-services *,
.ns-services *::before,
.ns-services *::after{box-sizing:border-box;}

.ns-services .ns-head,
.ns-services .ns-grid,
.ns-services .ns-quick,
.ns-services .ns-banner,
.ns-services .ns-footnote{
	max-width:1120px;
	margin-left:auto;
	margin-right:auto;
}

/* ---------- heading ---------- */
.ns-services .ns-head{max-width:1120px;margin-bottom:38px;}

/* Centred heading variant */
.ns-services.ns-head-center .ns-head{
	text-align:center;
	max-width:640px;
}
.ns-services.ns-head-center .ns-intro{
	margin-left:auto;
	margin-right:auto;
}
.ns-services .ns-eyebrow{
	margin:0 0 4px;
	font-size:.78rem;
	font-weight:600;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--ns-deep);
}
.ns-services .ns-eyebrow-light{color:var(--ns-accent);}
.ns-services .ns-h2{
	margin:0 0 10px;
	font-size:clamp(1.8rem,3.6vw,2.45rem);
	font-weight:800;
	line-height:1.1;
	letter-spacing:-.01em;
	color:var(--ns-ink);
}
.ns-services .ns-intro{
	margin:0;
	max-width:60ch;
	color:var(--ns-grey);
}

/* ---------- cards ---------- */
.ns-services .ns-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
	gap:22px;
	padding-top:14px; /* room for the overhanging badges */
}
.ns-services .ns-card{
	position:relative;
	display:flex;
	flex-direction:column;
	background:var(--ns-card);
	border:1px solid var(--ns-line);
	border-radius:var(--ns-radius);
	padding:28px 26px;
	transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ns-services .ns-card:hover,
.ns-services .ns-card:focus-within{
	transform:translateY(-4px);
	box-shadow:var(--ns-shadow);
}
.ns-services .ns-card.is-featured{
	border:2px solid var(--ns-deep);
}

.ns-services .ns-badge{
	position:absolute;
	top:-13px;
	left:24px;
	background:var(--ns-deep);
	color:var(--ns-on-dark);
	font-size:.72rem;
	font-weight:700;
	letter-spacing:.1em;
	text-transform:uppercase;
	padding:5px 12px;
	border-radius:999px;
	white-space:nowrap;
}
.ns-services .ns-card.is-featured .ns-badge{background:var(--ns-ink);}

.ns-services .ns-card-title{
	margin:0 0 6px;
	font-size:1.3rem;
	font-weight:800;
	line-height:1.2;
	color:var(--ns-ink);
}
.ns-services .ns-price{
	margin:0;
	font-size:1.7rem;
	font-weight:800;
	color:var(--ns-deep);
	font-variant-numeric:tabular-nums;
}
.ns-services .ns-per{
	font-size:.9rem;
	font-weight:700;
	color:var(--ns-deep);
	margin-left:-2px;
}
.ns-services .ns-duration{
	font-size:.85rem;
	font-weight:600;
	color:var(--ns-grey);
}
.ns-services .ns-blurb{
	margin:2px 0 18px;
	font-size:.88rem;
	color:var(--ns-grey);
}

.ns-services .ns-features{
	list-style:none;
	margin:0 0 24px;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:9px;
	font-size:.94rem;
}
.ns-services .ns-features li{
	display:flex;
	align-items:flex-start;
	gap:9px;
	color:var(--ns-grey);
	margin:0;
}
.ns-services .ns-features svg{
	flex:none;
	width:14px;
	height:14px;
	margin-top:4px;
	fill:none;
	stroke:var(--ns-deep);
	stroke-width:2.2;
	stroke-linecap:round;
	stroke-linejoin:round;
}

/* ---------- frequency pills ---------- */
.ns-services .ns-freq{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:0 0 18px;
}
.ns-services .ns-freq-pill{
	display:inline-flex;
	align-items:center;
	padding:6px 14px;
	border:1px solid var(--ns-line);
	border-radius:999px;
	font-size:.82rem;
	font-weight:600;
	color:var(--ns-grey);
	background:var(--ns-card);
	cursor:pointer;
	transition:border-color .15s ease, color .15s ease;
}
.ns-services .ns-freq-pill:hover,
.ns-services .ns-freq-pill.is-active{
	border-color:var(--ns-deep);
	color:var(--ns-deep);
}

/* ---------- buttons ---------- */
.ns-services .ns-btn{
	position:relative;
	overflow:hidden;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	margin-top:auto;
	padding:14px 26px;
	border-radius:999px;
	background:var(--ns-deep);
	color:var(--ns-on-dark);
	font-weight:700;
	font-size:.95rem;
	text-align:center;
	text-decoration:none;
	box-shadow:var(--ns-shadow-btn);
	transition:background .15s ease, transform .15s ease;
}
.ns-services .ns-btn:hover,
.ns-services .ns-btn:focus{
	background:var(--ns-dark);
	color:var(--ns-on-dark);
	transform:translateY(-1px);
	text-decoration:none;
}
.ns-services .ns-btn:focus-visible{
	outline:3px solid var(--ns-accent);
	outline-offset:2px;
}
.ns-services .ns-btn-light{
	background:var(--ns-card);
	color:var(--ns-dark);
	box-shadow:none;
	margin-top:12px;
}
.ns-services .ns-btn-light:hover,
.ns-services .ns-btn-light:focus{
	background:var(--ns-card);
	color:var(--ns-dark);
}

/* ---------- gloss sweep on hover ---------- */
.ns-services .ns-sweep::after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	background:var(--ns-sweep);
	transform:translateX(-120%);
}
.ns-services .ns-sweep:hover::after,
.ns-services .ns-sweep:focus-visible::after{
	animation:ns-sweep .9s ease;
}
@keyframes ns-sweep{to{transform:translateX(120%);}}

/* ---------- quick package rows ---------- */
.ns-services .ns-quick{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:18px;
	margin-top:22px;
}
.ns-services .ns-qcard{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:16px;
	background:var(--ns-card);
	border:1px solid var(--ns-line);
	border-radius:var(--ns-radius);
	padding:18px 22px;
	text-decoration:none;
	color:inherit;
	transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ns-services .ns-qcard:hover,
.ns-services .ns-qcard:focus-visible{
	border-color:var(--ns-deep);
	box-shadow:var(--ns-shadow-sm);
	transform:translateY(-2px);
	text-decoration:none;
	color:inherit;
}
.ns-services .ns-qtext strong{display:block;font-weight:700;}
.ns-services .ns-qtext small{display:block;color:var(--ns-grey);}
.ns-services .ns-qprice{
	font-weight:800;
	color:var(--ns-deep);
	white-space:nowrap;
	font-variant-numeric:tabular-nums;
}

/* ---------- ceramic banner ---------- */
.ns-services .ns-banner{
	position:relative;
	overflow:hidden;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:24px;
	flex-wrap:wrap;
	margin-top:26px;
	padding:34px 32px;
	border-radius:var(--ns-radius);
	background:linear-gradient(140deg,var(--ns-deep),var(--ns-dark));
	color:var(--ns-on-dark);
}
.ns-services .ns-banner h3{
	margin:0 0 6px;
	font-size:1.4rem;
	font-weight:800;
	color:var(--ns-on-dark);
}
.ns-services .ns-banner-copy p{
	margin:0;
	max-width:52ch;
	font-size:.95rem;
	opacity:.82;
}
.ns-services .ns-banner-cta{text-align:right;}
.ns-services .ns-banner-price{
	margin:0;
	font-size:1.5rem;
	font-weight:800;
	color:var(--ns-accent);
	font-variant-numeric:tabular-nums;
}

/* ---------- footnote ---------- */
.ns-services .ns-footnote{
	margin:22px auto 0;
	font-size:.85rem;
	color:var(--ns-grey);
	text-align:center;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
	.ns-services .ns-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;}
	.ns-services .ns-quick{grid-template-columns:1fr;}
}
@media (max-width:620px){
	.ns-services .ns-grid{grid-template-columns:1fr;}
}
@media (max-width:600px){
	.ns-services{padding:48px 16px 56px;}
	.ns-services .ns-price{font-size:1.45rem;}
	.ns-services .ns-banner{padding:26px 22px;}
	.ns-services .ns-banner-cta{text-align:left;width:100%;}
	.ns-services .ns-btn{width:100%;}
}

@media (prefers-reduced-motion:reduce){
	.ns-services *,
	.ns-services *::before,
	.ns-services *::after{
		animation:none !important;
		transition:none !important;
	}
	.ns-services .ns-card:hover,
	.ns-services .ns-qcard:hover,
	.ns-services .ns-btn:hover{transform:none;}
}