/* ============================================================
   Northline service/product pages — styles ported 1:1 from the
   original Shopify product page sections with live settings:
   product1hero → product1section02 → product1section2 →
   product1partner → product1feature → product1enquryform.
   ============================================================ */

/* ════════ HERO (product1hero) ════════ */
#nl-phero {
	--nph-bg: #151515;
	--nph-text: #ffffff;
	--nph-muted: #777777;
	--nph-accent: #e8553a;
	--nph-btn-bg: #e8553a;
	--nph-btn-text: #ffffff;
	--nph-divider: rgba(255,255,255,.12);
	background: var(--nph-bg) !important;
	color: var(--nph-text);
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
	padding: calc(112px + 80px) 0 0;
	position: relative;
}
#nl-phero *, #nl-phero *::before, #nl-phero *::after { box-sizing: border-box; }
#nl-phero .nph__inner { max-width: 1400px; margin: 0 auto; padding: 0 64px; }
#nl-phero .nph__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; }
#nl-phero .nph__eyebrow-dot { width: 10px; height: 10px; border-radius: 2px; background: var(--nph-accent); flex-shrink: 0; }
#nl-phero .nph__eyebrow-text { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; }
#nl-phero .nph__title {
	margin: 0;
	font-size: clamp(32px, 4.5vw, 48px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
}
#nl-phero .nph__subtitle {
	margin: 4px 0 0;
	font-size: clamp(26px, 3.5vw, 42px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--nph-muted);
	max-width: 36ch;
}
#nl-phero .nph__divider { width: 100%; height: 1px; background: var(--nph-divider); margin-top: 48px; }
#nl-phero .nph__cta-row { display: flex; align-items: center; gap: 24px; padding: 36px 0; flex-wrap: wrap; }
#nl-phero .nph__btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 18px 36px;
	background: var(--nph-btn-bg);
	color: var(--nph-btn-text);
	font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
	text-decoration: none;
	border: 0 solid transparent;
	border-radius: 6px;
	cursor: pointer;
	transition: opacity .2s, transform .2s;
	white-space: nowrap;
}
#nl-phero .nph__btn:hover { opacity: .85; transform: translateY(-1px); }
#nl-phero .nph__cta-note { font-size: 16px; font-weight: 400; color: #ffffff; line-height: 1.4; }
@media (max-width: 740px) {
	#nl-phero { padding-top: calc(112px + 48px); }
	#nl-phero .nph__inner { padding: 0 24px; }
	#nl-phero .nph__cta-row { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ════════ SHOWCASE + INFO CARD (product1section02) ════════ */
#nl-pshow {
	--nps-card-bg: #e8553a;
	--nps-card-text: #ffffff;
	--nps-accent: #1a1a1a;
	position: relative;
	width: 100%;
	min-height: 700px;
	overflow: hidden;
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}
#nl-pshow *, #nl-pshow *::before, #nl-pshow *::after { box-sizing: border-box; }
#nl-pshow .nps__bg { position: absolute; inset: 0; z-index: 0; }
#nl-pshow .nps__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
#nl-pshow .nps__overlay {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
}
#nl-pshow .nps__card {
	position: absolute;
	z-index: 2;
	bottom: 0;
	right: 0;
	width: 360px;
	max-width: 100%;
	background: var(--nps-card-bg);
	color: var(--nps-card-text);
	padding: 36px;
	border-radius: 0;
}
#nl-pshow .nps__card-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; }
#nl-pshow .nps__card-dot { width: 10px; height: 10px; border-radius: 2px; background: var(--nps-accent); flex-shrink: 0; }
#nl-pshow .nps__card-eyebrow-text { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; }
#nl-pshow .nps__card-body { font-size: 16px; font-weight: 400; line-height: 1.55; margin: 0; }
#nl-pshow .nps__card-body p { margin: 0 0 16px; }
#nl-pshow .nps__card-body p:last-child { margin-bottom: 0; }
#nl-pshow .nps__bg--mobile { display: none; }
@media (max-width: 740px) {
	#nl-pshow { display: flex; flex-direction: column; min-height: auto; }
	#nl-pshow .nps__bg { position: relative; height: 360px; flex-shrink: 0; }
	#nl-pshow.has-mobile-bg .nps__bg--desktop { display: none; }
	#nl-pshow.has-mobile-bg .nps__bg--mobile { display: block; }
	#nl-pshow .nps__bg--mobile img { object-position: center center; }
	#nl-pshow .nps__overlay { height: 360px; bottom: auto; }
	#nl-pshow .nps__card { position: relative; bottom: auto; right: auto; width: 100%; max-width: 100%; border-radius: 0; padding: 28px; }
	#nl-pshow .nps__card-body { font-size: 15px; }
}

/* ════════ HOW IT WORKS / SUPPLY ANYWHERE (product1section2) ════════ */
#nl-phow {
	--nphw-bg: #151515;
	--nphw-text: #ffffff;
	--nphw-muted: #999999;
	--nphw-accent: #e8553a;
	--nphw-num: #e8553a;
	background: var(--nphw-bg) !important;
	color: var(--nphw-text);
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
	padding: 64px 0 80px;
}
#nl-phow *, #nl-phow *::before, #nl-phow *::after { box-sizing: border-box; }
#nl-phow .nphw__inner { max-width: 1400px; margin: 0 auto; padding: 0 64px; }
#nl-phow .nphw__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; }
#nl-phow .nphw__eyebrow-dot { width: 10px; height: 10px; border-radius: 2px; background: var(--nphw-accent); flex-shrink: 0; }
#nl-phow .nphw__eyebrow-text { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; }
#nl-phow .nphw__title {
	margin: 0 0 48px;
	font-size: clamp(48px, 12vw, 160px);
	font-weight: 700;
	line-height: 0.92;
	letter-spacing: -0.04em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#nl-phow .nphw__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
#nl-phow .nphw__step-num { font-size: 20px; font-weight: 700; color: var(--nphw-num); line-height: 1; margin-bottom: 12px; }
#nl-phow .nphw__step-img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 0;
	background: #222;
	display: block;
	margin-bottom: 16px;
}
#nl-phow .nphw__step-title { margin: 0 0 8px; font-size: clamp(18px, 2vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
#nl-phow .nphw__step-desc { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--nphw-muted); }
@media (max-width: 740px) {
	#nl-phow { padding: 40px 0 56px; }
	#nl-phow .nphw__inner { padding: 0 24px; }
	#nl-phow .nphw__title { white-space: normal; font-size: clamp(48px, 14vw, 160px); }
	#nl-phow .nphw__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 480px) {
	#nl-phow .nphw__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ════════ PARTNER (product1partner) ════════ */
#nl-ppart {
	--npp-text: #ffffff;
	--npp-muted: #cccccc;
	--npp-accent: #e8553a;
	position: relative;
	width: 100%;
	min-height: 700px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
	color: var(--npp-text);
}
#nl-ppart *, #nl-ppart *::before, #nl-ppart *::after { box-sizing: border-box; }
#nl-ppart .npp__bg { position: absolute; inset: 0; z-index: 0; }
#nl-ppart .npp__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
#nl-ppart .npp__overlay {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%);
}
#nl-ppart .npp__eyebrow-wrap { position: relative; z-index: 2; padding: 32px 64px 0; max-width: 1400px; margin: 0 auto; width: 100%; }
#nl-ppart .npp__eyebrow { display: inline-flex; align-items: center; gap: 10px; }
#nl-ppart .npp__eyebrow-dot { width: 10px; height: 10px; border-radius: 2px; background: var(--npp-accent); flex-shrink: 0; }
#nl-ppart .npp__eyebrow-text { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; }
#nl-ppart .npp__bottom {
	position: relative; z-index: 2;
	max-width: 1400px; margin: 0 auto; width: 100%;
	padding: 0 64px 48px;
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 48px;
	align-items: end;
}
#nl-ppart .npp__logo img { max-width: 280px; height: auto; display: block; }
#nl-ppart .npp__logo-text { font-size: 32px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
#nl-ppart .npp__desc { margin: 0; font-size: 17px; font-weight: 400; line-height: 1.55; color: var(--npp-text); }
#nl-ppart .npp__quote { margin: 0; font-size: 17px; font-weight: 400; line-height: 1.55; color: var(--npp-muted); font-style: normal; }
#nl-ppart .npp__author { margin-top: 8px; font-size: 15px; font-weight: 400; color: var(--npp-muted); font-style: normal; }
#nl-ppart .npp__bg--mobile { display: none; }
@media (max-width: 740px) {
	#nl-ppart { min-height: 600px; }
	#nl-ppart .npp__eyebrow-wrap { padding: 24px 24px 0; }
	#nl-ppart.has-mobile-bg .npp__bg--desktop { display: none; }
	#nl-ppart.has-mobile-bg .npp__bg--mobile { display: block; }
	#nl-ppart .npp__bg--mobile img { object-position: center center; }
	#nl-ppart .npp__overlay { background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.75) 100%); }
	#nl-ppart .npp__bottom { grid-template-columns: 1fr; gap: 24px; padding: 0 24px 32px; }
	#nl-ppart .npp__desc { font-size: 15px; }
	#nl-ppart .npp__quote { font-size: 15px; }
}

/* ════════ CERTIFICATION / PARTICLE HERO (product1feature) ════════ */
#nl-pfh {
	--npf-bg: #0e0e0e;
	--npf-text: #ffffff;
	--npf-muted: #777777;
	--npf-accent: #e8553a;
	--npf-btn-text: #ffffff;
	--npf-btn-border: rgba(255,255,255,.3);
	background: var(--npf-bg) !important;
	color: var(--npf-text);
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
	position: relative;
	overflow: hidden;
	min-height: 700px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#nl-pfh *, #nl-pfh *::before, #nl-pfh *::after { box-sizing: border-box; }
#nl-pfh .npf__canvas { position: absolute; inset: 0; z-index: 0; }
#nl-pfh .npf__content { position: relative; z-index: 2; text-align: center; padding: 80px 32px; max-width: 800px; }
#nl-pfh .npf__eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; }
#nl-pfh .npf__eyebrow-dot { width: 10px; height: 10px; border-radius: 2px; background: var(--npf-accent); flex-shrink: 0; }
#nl-pfh .npf__eyebrow-text { font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; }
#nl-pfh .npf__title { margin: 0; font-size: clamp(30px, 5vw, 52px); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; }
#nl-pfh .npf__subtitle { margin: 4px 0 0; font-size: clamp(26px, 4vw, 42px); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: var(--npf-muted); }
#nl-pfh .npf__btn {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 28px;
	padding: 14px 28px;
	background: transparent;
	color: var(--npf-btn-text);
	font-size: 16px; font-weight: 500; letter-spacing: -0.01em;
	text-decoration: none;
	border: 1px solid var(--npf-btn-border);
	border-radius: 6px;
	transition: background .2s, border-color .2s;
	cursor: pointer;
}
#nl-pfh .npf__btn:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.5); }
#nl-pfh .npf__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 740px) {
	#nl-pfh { min-height: 500px; }
	#nl-pfh .npf__content { padding: 60px 24px; }
}

/* ════════ ENQUIRY FORM (product1enquryform) ════════ */
#nl-pinq {
	--npi-bg: #151515;
	--npi-card: #222222;
	--npi-text: #ffffff;
	--npi-muted: #777777;
	--npi-accent: #e8553a;
	--npi-input-bg: transparent;
	--npi-input-border: rgba(255,255,255,.25);
	--npi-input-text: #ffffff;
	--npi-btn-bg: #e8553a;
	--npi-btn-text: #ffffff;
	background: var(--npi-bg) !important;
	color: var(--npi-text);
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
	padding: 64px 48px 64px;
}
#nl-pinq *, #nl-pinq *::before, #nl-pinq *::after { box-sizing: border-box; }
#nl-pinq .npi__card {
	max-width: 1340px;
	margin: 0 auto;
	background: var(--npi-card);
	border-radius: 8px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	padding: 0;
	min-height: 500px;
}
#nl-pinq .npi__left { display: flex; flex-direction: column; justify-content: flex-end; padding: 56px; }
#nl-pinq .npi__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; }
#nl-pinq .npi__eyebrow-dot { width: 10px; height: 10px; border-radius: 2px; background: var(--npi-accent); }
#nl-pinq .npi__eyebrow-text { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; }
#nl-pinq .npi__title { margin: 0; font-size: clamp(28px, 3.5vw, 42px); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; }
#nl-pinq .npi__title-muted { color: var(--npi-muted); }
#nl-pinq .npi__form { display: flex; flex-direction: column; gap: 20px; padding: 56px; }
#nl-pinq .npi__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
#nl-pinq .npi__label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 8px; color: var(--npi-text); }
#nl-pinq .npi__input,
#nl-pinq .npi__textarea {
	width: 100%;
	background: var(--npi-input-bg);
	border: 2px solid var(--npi-input-border);
	border-radius: 4px;
	padding: 14px 16px;
	font-size: 16px;
	color: var(--npi-input-text);
	font-family: inherit;
	outline: none;
	transition: border-color .2s;
}
#nl-pinq .npi__textarea { min-height: 100px; resize: vertical; }
#nl-pinq .npi__input:focus,
#nl-pinq .npi__textarea:focus { border-color: var(--npi-text); }
#nl-pinq .npi__submit {
	align-self: flex-start;
	padding: 18px 36px;
	background: var(--npi-btn-bg);
	color: var(--npi-btn-text);
	font-size: 16px;
	font-weight: 600;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-family: inherit;
	transition: opacity .2s;
	margin-top: 8px;
}
#nl-pinq .npi__submit:hover { opacity: .85; }
#nl-pinq .npi__submit[disabled] { opacity: .6; cursor: default; }
#nl-pinq .npi__error { margin: 0; font-size: 14px; color: #f87171; min-height: 1em; }
#nl-pinq .npi__success { margin: 0; padding: 56px; color: var(--npi-text); display: flex; align-items: center; justify-content: center; min-height: 100%; }
#nl-pinq .npi__success-box {
	width: 100%;
	max-width: 520px;
	padding: 34px 32px;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 12px;
	background: rgba(255,255,255,.035);
	text-align: left;
}
#nl-pinq .npi__success-icon {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--npi-accent);
	color: var(--npi-btn-text);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 24px; font-weight: 700;
	margin-bottom: 18px;
}
#nl-pinq .npi__success-title { margin: 0 0 10px; color: var(--npi-text); font-size: 26px; line-height: 1.2; font-weight: 600; }
#nl-pinq .npi__success-text { margin: 0; color: var(--npi-muted); font-size: 16px; line-height: 1.6; font-weight: 400; }
#nl-pinq .npi__success[hidden] { display: none; }
#nl-pinq .npi__form.is-hidden { display: none; }
@media (max-width: 740px) {
	#nl-pinq { padding: 32px 16px 32px; }
	#nl-pinq .npi__card { grid-template-columns: 1fr; padding: 0; }
	#nl-pinq .npi__row { grid-template-columns: 1fr; }
	#nl-pinq .npi__left { padding: 28px; }
	#nl-pinq .npi__form { padding: 28px; }
	#nl-pinq .npi__success { padding: 28px; }
	#nl-pinq .npi__success-box { padding: 28px 24px; }
	#nl-pinq .npi__success-title { font-size: 22px; }
}