/**
 * Soker Hello Child — homepage section styles ("Emanuel version").
 * Namespaced `soker-` (distinct from the shared `nx-` brand components in
 * tokens.css: header, footer, buttons, widgets). Logical properties only —
 * zero physical left/right. Mobile-first; fluid type via clamp(). Uses only
 * the existing --nx-* tokens (tokens.css) — no hardcoded hex.
 */

/* ==========================================================================
   Elementor dual-render pattern — swap visibility
   ========================================================================== */

/* Live site: Elementor area stays hidden (inline style), coded sections show. */
/* Elementor editor: body gets `elementor-editor-active` — flip visibility. */
.elementor-editor-active .soker-elementor-area {
	display: block !important;
}

.elementor-editor-active .soker-home-sections {
	display: none !important;
}

/* ==========================================================================
   Section base utilities
   ========================================================================== */

.soker-section {
	padding-block: clamp(3rem, 2.25rem + 2.5vw, 5rem);
	overflow: hidden;
}

.soker-hero__inner,
.soker-trust__inner,
.soker-segments__inner,
.soker-stats__inner,
.soker-services__inner,
.soker-support__inner,
.soker-compare__inner,
.soker-why-us__inner,
.soker-packages__inner,
.soker-guides__inner,
.soker-testimonials__inner,
.soker-cta-final__inner {
	position: relative;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.soker-section__heading {
	text-align: center;
	margin-block-end: 1rem;
}

.soker-section__heading--rule {
	display: flex;
	align-items: center;
	gap: 1rem;
	justify-content: center;
}

.soker-section__heading--rule::before,
.soker-section__heading--rule::after {
	content: "";
	flex: 1 1 3rem;
	max-inline-size: 4rem;
	block-size: 1px;
	background-color: var(--nx-line);
}

.soker-section__subhead {
	text-align: center;
	max-inline-size: 40rem;
	margin-inline: auto;
	margin-block-end: clamp(2rem, 1.6rem + 1.5vw, 3rem);
	color: var(--nx-ink-muted);
}

.soker-section__sample {
	font-size: .7em;
	font-weight: 500;
	color: var(--nx-ink-muted);
}

/* ─── Shared check list ─── */

.soker-check-list {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.soker-check-list__item {
	display: flex;
	align-items: flex-start;
	gap: .5em;
}

.soker-check-list__mark {
	color: var(--nx-ink);
	font-weight: 700;
	line-height: 1.5;
	flex-shrink: 0;
}

/* ─── Reusable decorative concentric rings (hero + final CTA) ─── */

.soker-rings {
	position: absolute;
	inset-inline-end: -4rem;
	inset-block-end: -4rem;
	inline-size: 18rem;
	block-size: 18rem;
	pointer-events: none;
}

.soker-rings__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid var(--nx-line);
}

.soker-rings__ring--2 {
	inset: 2.5rem;
}

.soker-rings__ring--3 {
	inset: 5rem;
	animation: soker-ring-pulse 4s ease-in-out infinite;
}

@keyframes soker-ring-pulse {
	0%,
	100% {
		opacity: .6;
	}

	50% {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.soker-rings__ring--3 {
		animation: none;
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* Full-bleed conversion hero: the airport photo fills the section at every
   viewport, a navy scrim carries light copy on the inline-start side, CTAs
   sit inside the container. One pattern, no separate mobile layout. */
.soker-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--nx-navy);
	color: var(--nx-on-navy);
	display: grid;
	align-items: center;
	min-block-size: clamp(30rem, 82svh, 44rem);
}

/* Photo layer — covers the section. Desktop mirrors the frame so the
   traveler stands in the clear (physical-left) half, facing the copy,
   instead of hiding under the scrim and buttons. */
.soker-hero__photo {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 78% 38%;
}

@media (min-width: 900px) {
	.soker-hero__photo {
		transform: scaleX(-1);
		object-position: 78% 38%;
	}
}

/* Scrim layer — navy, heaviest under the copy (viewport right in RTL),
   thinning toward the photo subject. A bottom fade keeps CTA contrast. */
.soker-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to left, rgba(11, 24, 51, .93) 0%, rgba(11, 24, 51, .82) 34%, rgba(11, 24, 51, .38) 62%, rgba(11, 24, 51, .08) 88%),
		linear-gradient(to top, rgba(11, 24, 51, .45) 0%, rgba(11, 24, 51, 0) 30%);
}

.soker-hero__inner {
	position: relative;
	z-index: 1;
	inline-size: 100%;
	padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.soker-hero__copy {
	max-inline-size: 36rem;
}

.soker-hero__title {
	color: #fff;
	line-height: 1.12;
	margin: 0 0 1.25rem;
	font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem);
	text-wrap: balance;
}

.soker-hero__title-accent {
	display: block;
	color: var(--nx-red-2);
}

.soker-hero__subhead {
	color: var(--nx-on-navy);
	opacity: .92;
	font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
	line-height: 1.6;
	max-inline-size: 30rem;
	margin: 0;
}

.soker-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
	margin-block-start: 2rem;
}

.soker-hero__actions .nx-btn {
	padding-block: .95em;
	padding-inline: 1.9em;
	font-size: 1.05rem;
}

/* Secondary action on the scrim: quiet outline, white text. */
.soker-hero__ghost-btn {
	background-color: transparent;
	border: 1px solid rgba(245, 247, 250, .55);
	color: #fff;
}

.soker-hero__ghost-btn:hover,
.soker-hero__ghost-btn:focus-visible {
	background-color: rgba(245, 247, 250, .12);
	border-color: rgba(245, 247, 250, .85);
	color: #fff;
}

/* Phones: portrait crop — bias toward the traveler, deepen the scrim so
   the copy column stays readable over the busy part of the photo. */
@media (max-width: 899px) {
	.soker-hero {
		min-block-size: clamp(28rem, 86svh, 40rem);
		align-items: end;
	}

	.soker-hero__photo {
		object-position: 72% 30%;
	}

	.soker-hero__scrim {
		background:
			linear-gradient(to top, rgba(11, 24, 51, .95) 0%, rgba(11, 24, 51, .78) 44%, rgba(11, 24, 51, .30) 72%, rgba(11, 24, 51, .10) 100%);
	}

	.soker-hero__inner {
		padding-block-end: clamp(2rem, 6vw, 3rem);
	}

	.soker-hero__actions .nx-btn {
		flex: 1 1 auto;
		text-align: center;
		justify-content: center;
	}
}

/* ==========================================================================
   Trust logos strip
   ========================================================================== */

.soker-trust {
	background-color: var(--nx-subtle);
	padding-block: clamp(2rem, 1.7rem + 1.2vw, 3rem);
}

.soker-trust__heading {
	text-align: start;
	font-size: 1rem;
	color: var(--nx-ink);
	font-weight: 700;
	margin: 0 0 1.5rem;
}

.soker-trust__sample {
	font-size: .85em;
	font-weight: 500;
	margin-inline-start: .35em;
}

.soker-trust__logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.soker-trust__logo {
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--nx-body);
	opacity: .8;
	white-space: nowrap;
}

/* ==========================================================================
   Segments — "לעסקים בכל גודל"
   ========================================================================== */

/* Centered header + one joined rail split by hairlines (not three floating
   twins): each segment is a cell with a tinted icon disc, size title, one
   line and an arrow link. */
.soker-segments {
	background-color: var(--nx-subtle);
}

.soker-segments .soker-section__heading {
	margin-block-end: 2.5rem;
}

.soker-segments__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	background-color: var(--nx-surface);
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius-card);
	overflow: hidden;
	box-shadow: var(--nx-shadow-soft);
}

.soker-segment-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2.25rem 1.75rem 2rem;
	transition: background-color .2s ease;
}

.soker-segment-card + .soker-segment-card {
	border-block-start: 1px solid var(--nx-line);
}

@media (hover: hover) {
	.soker-segment-card:hover {
		background-color: var(--nx-subtle);
	}
}

.soker-segment-card__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin-block-end: .75rem;
}

.soker-segment-card__icon {
	box-sizing: content-box;
	color: var(--nx-red-ink);
	background-color: rgba(238, 74, 43, .09);
	border-radius: var(--nx-radius-pill);
	padding: .8rem;
}

.soker-segment-card__title {
	margin: 0;
	font-size: 1.15rem;
}

.soker-segment-card__text {
	color: var(--nx-ink-muted);
	font-size: .95rem;
	max-inline-size: 17rem;
	margin: 0 0 1.25rem;
}

.soker-segment-card__link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	min-block-size: 2.75rem;
	margin-block-start: auto;
	color: var(--nx-red-ink);
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
}

.soker-segment-card__link span {
	transition: transform .2s ease;
}

.soker-segment-card__link:hover,
.soker-segment-card__link:focus-visible {
	text-decoration: underline;
}

.soker-segment-card__link:hover span,
.soker-segment-card__link:focus-visible span {
	transform: translateX(-3px);
}

@media (min-width: 780px) {
	.soker-segments__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.soker-segment-card + .soker-segment-card {
		border-block-start: 0;
		border-inline-start: 1px solid var(--nx-line);
	}
}

/* ==========================================================================
   Stats band
   ========================================================================== */

.soker-stats {
	background-color: var(--nx-navy);
	color: var(--nx-on-navy);
	padding-block: clamp(2rem, 1.6rem + 1.5vw, 3rem);
}

.soker-stats__inner {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(2, 1fr);
	text-align: center;
	direction: ltr;              /* 24/6 on the left, like the mockup */
}

.soker-stat {
	direction: rtl;              /* keep each stat's Hebrew label correct */
}

/* Thin separators between stats (inner grid is LTR, so physical left). */
@media (min-width: 640px) {
	.soker-stat:not(:first-child) {
		border-left: 1px solid var(--nx-on-navy-line, rgba(255, 255, 255, .18));
	}
}

.soker-stat__value {
	font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
	font-weight: 800;
	color: var(--nx-on-navy);
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.soker-stat__label {
	color: var(--nx-on-navy-muted);
	margin: .25rem 0 0;
	font-size: .9rem;
}

@media (min-width: 640px) {
	.soker-stats__inner {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================================
   Services — "חבילה אחת. איש קשר אחד. הכול מסודר."
   ========================================================================== */

.soker-services {
	background-color: var(--nx-surface);
}

/* Photo tiles linking into the services showcase. */
.soker-services__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-block-start: 2.5rem;
}

/* Odd tile count: the last tile spans the 2-col mobile row (no orphan). */
.soker-service:last-child:nth-child(odd) {
	grid-column: span 2;
}

.soker-service:last-child:nth-child(odd) .soker-service__img {
	aspect-ratio: 16 / 9;
}

@media (min-width: 780px) {
	.soker-services__grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 1.25rem;
	}

	.soker-service:last-child:nth-child(odd) {
		grid-column: auto;
	}

	.soker-service:last-child:nth-child(odd) .soker-service__img {
		aspect-ratio: 4 / 5;
	}
}

.soker-service {
	position: relative;
	display: block;
	border-radius: var(--nx-radius-card);
	overflow: hidden;
	text-decoration: none;
	box-shadow: var(--nx-shadow-soft);
	transition: transform .2s ease, box-shadow .2s ease;
}

@media (hover: hover) {
	.soker-service:hover {
		transform: translateY(-4px);
	}
}

.soker-service:focus-visible {
	transform: translateY(-4px);
}

.soker-service__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform .45s cubic-bezier(0, 0, .2, 1);
}

/* Hover: photo zooms softly, scrim deepens, label arrow appears. */
@media (hover: hover) {
	.soker-service:hover .soker-service__img {
		transform: scale(1.06);
	}

	.soker-service:hover::after {
		background: linear-gradient(180deg, rgba(15, 31, 64, .08) 35%, rgba(15, 31, 64, .9) 100%);
	}
}

.soker-service:focus-visible .soker-service__img {
	transform: scale(1.06);
}

/* Navy gradient scrim keeps the label AA-readable over any photo. */
.soker-service::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 31, 64, 0) 45%, rgba(15, 31, 64, .82) 100%);
	pointer-events: none;
	transition: background .3s ease;
}

.soker-service__label {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: .45em;
	padding: .8rem .9rem;
	font-weight: 700;
	font-size: .95rem;
	color: var(--nx-on-accent);
	margin: 0;
}

.soker-service__icon {
	color: var(--nx-on-accent);
	flex-shrink: 0;
}

/* ─── Services strip: hover detail panel (pointer devices, via nav.js) ─── */

.soker-services__info {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows .45s cubic-bezier(0, 0, .2, 1), opacity .35s ease;
}

.soker-services__info.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
}

.soker-services__info-item {
	overflow: hidden;
	min-block-size: 0;
	max-inline-size: 44rem;
	margin-inline: auto;
	text-align: center;
	padding-block-start: 2rem;
}

.soker-services__info-title {
	font-size: 1.15rem;
	margin: 0 0 .4rem;
}

.soker-services__info-text {
	color: var(--nx-ink-muted);
	margin: 0 0 .75rem;
}

.soker-services__info-link {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	color: var(--nx-red-ink);
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none;
}

.soker-services__info-link:hover,
.soker-services__info-link:focus-visible {
	text-decoration: underline;
}

/* ==========================================================================
   Why us — numbered method
   ========================================================================== */

.soker-why-us {
	background-color: var(--nx-surface);
}

.soker-why-us__grid {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: 1fr;
	margin-block-start: 2.5rem;
}

.soker-why-card {
	text-align: center;
	padding-inline: 1rem;
}

.soker-why-card__number {
	display: block;
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--nx-red);
	margin-block-end: .5rem;
}

.soker-why-card__title {
	margin: 0 0 .35rem;
	font-size: 1.05rem;
}

/* Thin separators between the promise columns (desktop row layout). */
@media (min-width: 780px) {
	.soker-why-card:not(:first-child) {
		border-inline-start: 1px solid var(--nx-line);
	}
}

.soker-why-card__text {
	color: var(--nx-ink-muted);
	margin: 0;
}

@media (min-width: 780px) {
	.soker-why-us__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================================
   Packages
   ========================================================================== */

.soker-packages {
	background-color: var(--nx-surface);
}

.soker-packages__inner {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

.soker-package {
	background-color: var(--nx-surface);
	border-radius: var(--nx-radius-card);
	box-shadow: var(--nx-shadow-soft);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.soker-package__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 8;
	object-fit: cover;
}

.soker-package__header {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1.25rem 1.5rem;
	background-color: var(--nx-green-ink);
	color: var(--nx-on-accent);
}

/* Card variants: kosher (base) green, custom teal, business navy. */
.soker-package--custom .soker-package__header {
	background-color: var(--nx-teal-ink);
}

.soker-package--business .soker-package__header {
	background-color: var(--nx-navy);
}

.soker-package__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	padding: .4rem;
	border-radius: var(--nx-radius-pill);
	background-color: var(--nx-surface);
	color: var(--nx-green);
	flex-shrink: 0;
}

.soker-package--custom .soker-package__icon {
	color: var(--nx-teal);
}

.soker-package--business .soker-package__icon {
	color: var(--nx-navy);
}

.soker-package__title {
	color: var(--nx-on-accent);
	margin: 0;
}

.soker-package .soker-check-list {
	padding: 1.5rem;
	flex-grow: 1;
}

.soker-package__cta {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	gap: .35em;
	margin: 0 1.5rem 1.5rem;
	margin-inline-start: auto;
	color: var(--nx-ink);
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
}

.soker-package__cta:hover,
.soker-package__cta:focus-visible {
	text-decoration: underline;
}

@media (min-width: 900px) {
	.soker-packages__inner {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.soker-testimonials {
	background-color: var(--nx-surface);
}

.soker-testimonials__grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

/* White bordered cards with centered content, per the client-final mockup. */
.soker-testimonial {
	background-color: var(--nx-surface);
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius-card);
	padding: 1.75rem;
	margin: 0;
	text-align: center;
}

.soker-testimonial__stars {
	color: var(--nx-star);
	display: block;
	margin-block-end: .75rem;
	letter-spacing: .05em;
}

.soker-testimonial__quote {
	margin: 0 0 1rem;
	color: var(--nx-ink);
}

.soker-testimonial__quote p {
	margin: 0;
}

.soker-testimonial__author {
	display: flex;
	justify-content: center;
	gap: .3em;
	font-size: .95rem;
}

.soker-testimonial__name {
	font-weight: 700;
}

.soker-testimonial__role {
	color: var(--nx-body);
}

.soker-testimonials__sample {
	text-align: center;
	color: var(--nx-ink-muted);
	font-size: .8rem;
	margin: 1.25rem 0 0;
}

@media (min-width: 780px) {
	.soker-testimonials__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ===========================================================================
   Business-travel reading shelf
   ========================================================================== */

.soker-guides {
	background-color: var(--nx-subtle);
	padding-block: clamp(2.5rem, 2rem + 1.8vw, 4rem);
}

.soker-guides .soker-section__heading {
	margin-block-end: 2.25rem;
}

.soker-guides__grid {
	display: grid;
	gap: 1.25rem;
}

.soker-guide-card {
	background-color: var(--nx-surface);
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius-card);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}

@media (hover: hover) {
	.soker-guide-card:hover {
		transform: translateY(-4px);
		box-shadow: var(--nx-shadow-soft);
	}
}

.soker-guide-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--nx-shadow-soft);
}

.soker-guide-card__image-link {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background-color: var(--nx-navy);
}

.soker-guide-card__image {
	display: block;
	block-size: 100%;
	inline-size: 100%;
	object-fit: cover;
	transition: transform .3s cubic-bezier(0, 0, .2, 1);
}

@media (hover: hover) {
	.soker-guide-card:hover .soker-guide-card__image {
		transform: scale(1.05);
	}
}

/* Category chip pinned to the image corner. */
.soker-guide-card__category {
	position: absolute;
	inset-inline-start: .85rem;
	inset-block-end: .85rem;
	padding: .3rem .75rem;
	border-radius: var(--nx-radius-pill);
	background-color: var(--nx-surface);
	color: var(--nx-red-ink);
	font-size: .78rem;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(15, 31, 64, .18);
}

.soker-guide-card__body {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.25rem 1.25rem 1.15rem;
}

.soker-guide-card__title {
	font-size: 1.1rem;
	line-height: 1.4;
	margin: 0;
}

.soker-guide-card__title a {
	color: var(--nx-ink);
	text-decoration: none;
}

.soker-guide-card__title a:hover,
.soker-guide-card__title a:focus-visible {
	text-decoration: underline;
}

.soker-guide-card__excerpt {
	color: var(--nx-ink-muted);
	font-size: .92rem;
	line-height: 1.55;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.soker-guide-card__meta {
	color: var(--nx-ink-muted);
	font-size: .8rem;
	margin: .25rem 0 0;
}

.soker-guides__more {
	text-align: center;
	margin: 2.25rem 0 0;
}

.soker-guides__all {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-block-size: 2.9rem;
	padding-inline: 1.6rem;
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius-btn);
	background-color: var(--nx-surface);
	color: var(--nx-navy);
	font-size: .95rem;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}

.soker-guides__all:hover,
.soker-guides__all:focus-visible {
	border-color: var(--nx-red-ink);
	color: var(--nx-red-ink);
}

@media (min-width: 780px) {
	.soker-guides__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ===========================================================================
   "When something breaks" — navy duty-of-care band, 3-step timeline
   ========================================================================== */

.soker-support {
	background-color: var(--nx-navy);
	color: var(--nx-on-navy);
}

.soker-support .soker-section__kicker {
	color: var(--nx-red-2);
}

.soker-support__heading {
	color: #fff;
}

.soker-support__lead {
	text-align: center;
	color: var(--nx-on-navy-muted);
	max-inline-size: 34rem;
	margin: 0 auto 3rem;
	font-size: 1.1rem;
}

.soker-support__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2rem;
	counter-reset: none;
}

.soker-support__step {
	position: relative;
	text-align: center;
	padding-inline: 1rem;
}

.soker-support__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.6rem;
	block-size: 2.6rem;
	border-radius: var(--nx-radius-pill);
	background-color: var(--nx-red);
	color: #fff;
	font-weight: 800;
	font-size: 1.15rem;
	margin-block-end: 1rem;
}

.soker-support__step-title {
	color: #fff;
	font-size: 1.1rem;
	margin: 0 0 .4rem;
}

.soker-support__step-text {
	color: var(--nx-on-navy-muted);
	font-size: .95rem;
	margin: 0;
	max-inline-size: 16rem;
	margin-inline: auto;
}

@media (min-width: 780px) {
	.soker-support__steps {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}

	/* Connective dashed line between the step markers. */
	.soker-support__step::before {
		content: "";
		position: absolute;
		inset-block-start: 1.3rem;
		inset-inline-start: calc(-50% + 2.6rem);
		inline-size: calc(100% - 5.2rem);
		border-block-start: 1px dashed rgba(245, 247, 250, .3);
	}

	.soker-support__step:first-child::before {
		display: none;
	}
}

/* ===========================================================================
   Comparison — self-booking / big agency / us
   ========================================================================== */

.soker-compare {
	background-color: var(--nx-surface);
}

.soker-compare .soker-section__heading {
	margin-block-end: 2.5rem;
}

.soker-compare__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.soker-compare__table {
	inline-size: 100%;
	min-inline-size: 640px;
	border-collapse: separate;
	border-spacing: 0;
	font-size: .95rem;
}

.soker-compare__table th,
.soker-compare__table td {
	padding: 1rem 1.15rem;
	text-align: start;
	border-block-end: 1px solid var(--nx-line);
	vertical-align: top;
}

.soker-compare__table thead th {
	font-size: .9rem;
	color: var(--nx-ink-muted);
	border-block-end: 2px solid var(--nx-line);
}

.soker-compare__table tbody th {
	color: var(--nx-ink);
	font-weight: 700;
}

.soker-compare__table tbody td {
	color: var(--nx-ink-muted);
}

/* Our column — tinted and framed. */
.soker-compare__table .soker-compare__us {
	background-color: rgba(238, 74, 43, .06);
	color: var(--nx-ink);
	font-weight: 600;
}

.soker-compare__table thead .soker-compare__us {
	color: var(--nx-red-ink);
	font-weight: 800;
	border-block-start: 3px solid var(--nx-red);
	border-start-start-radius: var(--nx-radius-card);
	border-start-end-radius: var(--nx-radius-card);
}

.soker-compare__table tbody tr:last-child td,
.soker-compare__table tbody tr:last-child th {
	border-block-end: 0;
}

.soker-compare__table tbody tr:last-child .soker-compare__us {
	border-end-start-radius: var(--nx-radius-card);
	border-end-end-radius: var(--nx-radius-card);
}

/* ===========================================================================
   Final CTA band
   ========================================================================== */

.soker-cta-final {
	background-color: var(--nx-red);
	color: var(--nx-on-navy);
	position: relative;
	text-align: center;
}

.soker-cta-final__headline {
	color: var(--nx-on-navy);
	margin: 0 0 1.5rem;
}

.soker-cta-final__button {
	display: inline-flex;
	border-radius: var(--nx-radius-pill);
}

/* ==========================================================================
   Inner pages — shared utilities
   ========================================================================== */

.soker-section__kicker {
	text-align: center;
	color: var(--nx-red-ink);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .85rem;
	margin: 0 0 .5rem;
}

.soker-check-list--red .soker-check-list__mark {
	color: var(--nx-red-ink);
}

/* ==========================================================================
   Inner pages — shared light page-hero (services + contact)
   ========================================================================== */

/* Navy hero family (matches the homepage full-bleed hero): coral kicker,
   white title, soft corner glow instead of a per-page photo. */
.soker-page-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--nx-navy);
	color: var(--nx-on-navy);
	text-align: center;
	padding-block: clamp(3rem, 2.25rem + 3vw, 5rem);
}

.soker-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(42rem 22rem at 12% 115%, rgba(238, 74, 43, .18), transparent 65%),
		radial-gradient(30rem 18rem at 95% -20%, rgba(22, 41, 74, .9), transparent 70%);
	pointer-events: none;
}

.soker-page-hero__inner {
	position: relative;
	max-width: 760px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.soker-page-hero__kicker {
	color: var(--nx-red-2);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .85rem;
	margin: 0 0 .75rem;
}

.soker-page-hero__title {
	color: #fff;
	margin: 0 0 1rem;
	text-wrap: balance;
}

.soker-page-hero__accent {
	color: var(--nx-red-2);
}

.soker-page-hero__subhead {
	color: var(--nx-on-navy-muted);
	max-inline-size: 34rem;
	margin-inline: auto;
	margin-block-end: 1.75rem;
}

.soker-page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

.soker-page-hero__btn.nx-btn--ghost {
	background-color: transparent;
	border-color: rgba(245, 247, 250, .55);
	color: #fff;
}

.soker-page-hero__btn.nx-btn--ghost:hover,
.soker-page-hero__btn.nx-btn--ghost:focus-visible {
	background-color: rgba(245, 247, 250, .12);
	border-color: rgba(245, 247, 250, .85);
	color: #fff;
}

/* ==========================================================================
   Services — "מה כלול" detail cards
   ========================================================================== */

.soker-svc-detail {
	background-color: var(--nx-subtle);
}

.soker-svc-detail__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	text-align: center;
}

.soker-svc-detail__grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
	margin-block-start: 2.5rem;
	text-align: start;
}

.soker-svc-card {
	background-color: var(--nx-surface);
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius-card);
	padding: 1.75rem;
}

.soker-svc-card__icon {
	color: var(--nx-navy);
	margin-block-end: .75rem;
}

.soker-svc-card__title {
	margin: 0 0 .35rem;
}

.soker-svc-card__text {
	color: var(--nx-ink-muted);
	margin: 0;
}

@media (min-width: 640px) {
	.soker-svc-detail__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.soker-svc-detail__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   Services — showcase (sticky media + scroll-expanding service list).
   Base presentation = every item expanded with its inline photo (mobile,
   no-JS, reduced-motion). The .is-scrolly class (added by showcase.js)
   switches desktop to the sticky-pane scroll experience.
   ========================================================================== */

.soker-showcase {
	background-color: var(--nx-bg);
	/* sticky media pane needs an unclipped ancestor (.soker-section sets
	   overflow:hidden, which disables sticky). Nothing bleeds here. */
	overflow: visible;
}

.soker-showcase__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.soker-showcase__layout {
	margin-block-start: 1rem;
}

/* Sticky media pane, desktop only. */
.soker-showcase__media {
	display: none;
}

.soker-showcase__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.soker-showcase__item {
	border-block-start: 1px solid var(--nx-line);
	padding-block: 2rem;
	scroll-margin-block-start: 6rem;
}

.soker-showcase__item:first-child {
	border-block-start: 0;
}

.soker-showcase__title {
	display: flex;
	align-items: baseline;
	gap: .75rem;
	margin: 0 0 1rem;
	font-size: clamp(1.35rem, 1.2rem + .8vw, 1.8rem);
	color: var(--nx-ink);
}

.soker-showcase__num {
	color: var(--nx-red-ink);
	font-size: .8em;
	font-weight: 800;
}

.soker-showcase__item-img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--nx-radius-card);
	margin-block-end: 1.25rem;
}

.soker-showcase__lede {
	color: var(--nx-body);
	margin: 0;
	max-inline-size: 38rem;
}

.soker-showcase__body .soker-check-list {
	margin-block-start: 1rem;
	margin-block-end: .25rem;
}

@media (min-width: 900px) {
	.soker-showcase__layout {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: clamp(2.5rem, 2rem + 2vw, 4.5rem);
		align-items: start;
	}

	/* Media column stretches the whole list height; the frame inside it
	   sticks below the header and travels with the reader. */
	.soker-showcase__media {
		display: block;
		align-self: stretch;
	}

	.soker-showcase__media-frame {
		position: sticky;
		inset-block-start: 6.5rem;
		block-size: min(68vh, 32rem);
		border-radius: var(--nx-radius-card);
		overflow: hidden;
		box-shadow: var(--nx-shadow-soft);
	}

	.soker-showcase__media-img {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		opacity: 0;
		transition: opacity .5s ease;
	}

	.soker-showcase__media-img.is-active {
		opacity: 1;
	}

	/* Desktop shows the photo in the sticky pane, not inline. */
	.soker-showcase__item-img {
		display: none;
	}

	.soker-showcase__title {
		cursor: pointer;
	}

	/* Scroll-driven presentation (JS present, motion allowed): inactive
	   items collapse to their titles and dim; the active one expands. */
	.is-scrolly .soker-showcase__item .soker-showcase__title {
		color: var(--nx-ink-muted);
		transition: color .3s ease;
		margin-block-end: 0;
	}

	.is-scrolly .soker-showcase__item.is-active .soker-showcase__title {
		color: var(--nx-ink);
		margin-block-end: 1rem;
	}

	.is-scrolly .soker-showcase__body {
		display: grid;
		grid-template-rows: 0fr;
		opacity: 0;
		transition: grid-template-rows .5s cubic-bezier(0, 0, .2, 1), opacity .4s ease;
	}

	.is-scrolly .soker-showcase__item.is-active .soker-showcase__body {
		grid-template-rows: 1fr;
		opacity: 1;
	}

	.is-scrolly .soker-showcase__body-clip {
		overflow: hidden;
		min-block-size: 0;
	}
}

/* ==========================================================================
   Services — two worlds (business / leisure) split
   ========================================================================== */

.soker-worlds {
	background-color: var(--nx-surface);
}

.soker-worlds__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

.soker-world-card {
	background-color: var(--nx-surface);
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius-card);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	/* Anchor target (packages לפרטים) — land below the sticky header. */
	scroll-margin-block-start: 6rem;
}

/* Full-bleed photo header on the world cards. */
.soker-world-card__img {
	display: block;
	inline-size: calc(100% + 4rem);
	max-inline-size: none;
	margin: -2rem -2rem 1.5rem;
	block-size: auto;
	aspect-ratio: 16 / 8;
	object-fit: cover;
	border-start-start-radius: var(--nx-radius-card);
	border-start-end-radius: var(--nx-radius-card);
}

.soker-world-card__icon {
	color: var(--nx-navy);
	margin-block-end: .75rem;
}

.soker-world-card__title {
	margin: 0 0 .35rem;
}

.soker-world-card__kicker {
	color: var(--nx-ink-muted);
	margin: 0 0 .5rem;
}

.soker-world-card .soker-check-list {
	flex-grow: 1;
}

.soker-world-card__cta {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	margin-block-start: 1rem;
	color: var(--nx-red-ink);
	font-weight: 700;
	text-decoration: none;
}

.soker-world-card__cta:hover,
.soker-world-card__cta:focus-visible {
	text-decoration: underline;
}

@media (min-width: 780px) {
	.soker-worlds__inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   Services — "לפי גודל החברה" navy band with 3 size cards (anchor targets
   for the homepage segment cards' לפרטים links)
   ========================================================================== */

.soker-sizes {
	background-color: var(--nx-navy);
}

.soker-sizes__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	padding-block: clamp(1rem, .8rem + 1vw, 2rem);
}

.soker-sizes__kicker {
	color: var(--nx-red-2);
}

.soker-sizes__heading {
	color: var(--nx-on-navy);
}

.soker-sizes__subhead {
	color: var(--nx-on-navy-muted);
}

.soker-sizes__grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.soker-sizes__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.soker-size-card {
	background-color: var(--nx-surface);
	border-radius: var(--nx-radius-card);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	/* Land anchor jumps below the sticky header. */
	scroll-margin-block-start: 6rem;
}

.soker-size-card__badge {
	align-self: start;
	background-color: var(--nx-subtle);
	color: var(--nx-navy);
	border-radius: var(--nx-radius-pill);
	font-weight: 700;
	font-size: .8rem;
	padding: .3em .9em;
	margin: 0 0 .9rem;
}

.soker-size-card__title {
	margin: 0 0 .5rem;
}

.soker-size-card__text {
	color: var(--nx-body);
	font-size: .95rem;
	margin: 0;
}

.soker-size-card .soker-check-list {
	flex-grow: 1;
	margin-block-start: 1.1rem;
}

.soker-size-card__cta {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	margin-block-start: 1.25rem;
	color: var(--nx-red-ink);
	font-weight: 700;
	text-decoration: none;
}

.soker-size-card__cta:hover,
.soker-size-card__cta:focus-visible {
	text-decoration: underline;
}

/* ==========================================================================
   Services — נופש כשר card (green accent)
   ========================================================================== */

.soker-kosher {
	background-color: var(--nx-subtle);
	scroll-margin-block-start: 5rem;
}

.soker-kosher__inner {
	max-width: 900px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.soker-kosher__card {
	background-color: var(--nx-surface);
	border-radius: var(--nx-radius-card);
	box-shadow: var(--nx-shadow-soft);
	overflow: hidden;
}

.soker-kosher__header {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem 2rem;
	background-color: var(--nx-green-ink);
	color: var(--nx-on-accent);
}

.soker-kosher__star {
	flex-shrink: 0;
}

.soker-kosher__title {
	color: var(--nx-on-accent);
	margin: 0 0 .25rem;
}

.soker-kosher__subhead {
	color: var(--nx-on-accent);
	margin: 0;
}

.soker-kosher__body {
	padding: 2rem;
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 780px) {
	.soker-kosher__body {
		grid-template-columns: 1.05fr .95fr;
	}
}

.soker-kosher__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--nx-radius-card);
}

.soker-kosher__cta {
	margin-block-start: 1.5rem;
}

/* ==========================================================================
   Services — "איך זה עובד" process
   ========================================================================== */

.soker-process {
	background-color: var(--nx-surface);
}

.soker-process__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.soker-process__grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	margin-block-start: 2.5rem;
}

.soker-process-card {
	text-align: center;
	padding-inline: .5rem;
}

.soker-process-card__number {
	display: block;
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--nx-red);
	margin-block-end: .5rem;
}

.soker-process-card__title {
	margin: 0 0 .35rem;
}

.soker-process-card__text {
	color: var(--nx-ink-muted);
	margin: 0;
}

@media (min-width: 780px) {
	.soker-process__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================================
   About — split hero (mirrors template-parts/hero.php's light + red-rings
   + photo-card pattern; own classes since copy/photo position differ)
   ========================================================================== */

.soker-about-hero {
	background-color: var(--nx-navy);
	color: var(--nx-on-navy);
	position: relative;
	overflow: hidden;
}

.soker-about-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(42rem 22rem at 10% 115%, rgba(238, 74, 43, .16), transparent 65%),
		radial-gradient(30rem 18rem at 95% -20%, rgba(22, 41, 74, .9), transparent 70%);
	pointer-events: none;
}

.soker-about-hero__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	display: grid;
	gap: 2.5rem;
	padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.soker-about-hero__kicker {
	color: var(--nx-red-2);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .85rem;
	margin: 0 0 1rem;
}

.soker-about-hero__title {
	color: #fff;
	margin: 0 0 1rem;
}

.soker-about-hero__accent {
	color: var(--nx-red-2);
}

.soker-about-hero__subhead {
	color: var(--nx-on-navy-muted);
	max-inline-size: 34rem;
	margin: 0 0 1.75rem;
}

.soker-about-hero__visual {
	position: relative;
	display: flex;
	justify-content: center;
	padding-block-start: 1rem;
}

.soker-about-hero__rings {
	inset-inline-end: auto;
	inset-inline-start: -2rem;
	inset-block-end: -2rem;
	inline-size: 14rem;
	block-size: 14rem;
}

.soker-about-hero__rings .soker-rings__ring {
	border: 12px solid var(--nx-red);
	opacity: .2;
	animation: none;
}

.soker-about-hero__rings .soker-rings__ring--2 {
	inset: 1.75rem;
	opacity: .35;
}

.soker-about-hero__rings .soker-rings__ring--3 {
	inset: 3.5rem;
	opacity: .55;
}

.soker-about-hero__photo {
	position: relative;
	z-index: 1;
	display: block;
	inline-size: 100%;
	max-inline-size: 22rem;
	block-size: auto;
	border-radius: var(--nx-radius-card);
	box-shadow: var(--nx-shadow-soft);
}

.soker-about-hero__card {
	position: absolute;
	z-index: 2;
	inset-inline-start: -1rem;
	inset-block-end: 2rem;
	inline-size: 14rem;
	max-inline-size: calc(100% - 2rem);
	background-color: var(--nx-surface);
	color: var(--nx-ink);
	border-radius: var(--nx-radius-card);
	box-shadow: var(--nx-shadow-soft);
	padding: .85rem 1.1rem;
}

.soker-about-hero__card-name {
	font-weight: 800;
	color: var(--nx-red-ink);
	font-size: .9rem;
	margin: 0;
}

@media (min-width: 900px) {
	.soker-about-hero__inner {
		grid-template-columns: 1.1fr .9fr;
		align-items: center;
	}

	.soker-about-hero__visual {
		justify-content: flex-end;
	}
}

/* ==========================================================================
   About — founder story + red pull quote
   ========================================================================== */

.soker-founder-story {
	background-color: var(--nx-subtle);
}

.soker-founder-story__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.soker-founder-story__grid {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
	margin-block-start: 2.5rem;
}

.soker-founder-story__text p {
	color: var(--nx-body);
	margin: 0 0 1rem;
}

.soker-founder-story__text p:last-child {
	margin-block-end: 0;
}

.soker-founder-story__aside {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.soker-founder-story__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--nx-radius-card);
	box-shadow: var(--nx-shadow-soft);
}

.soker-founder-story__quote {
	background-color: var(--nx-surface);
	border-radius: var(--nx-radius-card);
	box-shadow: var(--nx-shadow-soft);
	padding: 2rem;
	margin: 0;
}

.soker-founder-story__quote-mark {
	display: block;
	font-size: 3rem;
	line-height: 1;
	color: var(--nx-red);
	font-weight: 800;
	margin-block-end: .5rem;
}

.soker-founder-story__cite {
	color: var(--nx-ink-muted);
	font-size: .85rem;
	font-weight: 600;
	margin-block-start: .75rem;
}

.soker-founder-story__quote p {
	color: var(--nx-ink);
	font-weight: 600;
	margin: 0;
}

@media (min-width: 780px) {
	.soker-founder-story__grid {
		grid-template-columns: 1.1fr .9fr;
	}
}

/* ==========================================================================
   About — "איך אני עובד" personal method cards
   ========================================================================== */

.soker-method {
	background-color: var(--nx-surface);
}

.soker-method__inner {
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.soker-method__grid {
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
	margin-block-start: 2.5rem;
	background-color: var(--nx-surface);
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius-card);
	overflow: hidden;
	box-shadow: var(--nx-shadow-soft);
}

.soker-method-card {
	padding: 2rem 1.75rem;
	transition: background-color .2s ease;
}

.soker-method-card + .soker-method-card {
	border-block-start: 1px solid var(--nx-line);
}

@media (hover: hover) {
	.soker-method-card:hover {
		background-color: var(--nx-subtle);
	}
}

@media (min-width: 780px) {
	.soker-method__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.soker-method-card + .soker-method-card {
		border-block-start: 0;
		border-inline-start: 1px solid var(--nx-line);
	}
}

.soker-method-card__num {
	display: block;
	color: var(--nx-red-ink);
	font-weight: 800;
	font-size: .9rem;
	margin-block-end: .6rem;
}

.soker-method-card__title {
	margin: 0 0 .5rem;
	font-size: 1.1rem;
}

.soker-method-card__text {
	color: var(--nx-ink-muted);
	margin: 0;
	font-size: .95rem;
}

/* ==========================================================================
   About — "מה תקבלו ממני, ומה לא" honest split
   ========================================================================== */

.soker-promise {
	background-color: var(--nx-subtle);
}

.soker-promise__inner {
	max-width: 1000px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* On the subtle-grey band the default muted ink misses AA — use body ink. */
.soker-promise .soker-section__subhead {
	color: var(--nx-body);
}

.soker-promise__grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 780px) {
	.soker-promise__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.soker-promise__card {
	background-color: var(--nx-surface);
	border-radius: var(--nx-radius-card);
	box-shadow: var(--nx-shadow-soft);
	padding: 2rem;
}

.soker-promise__card--no {
	background-color: var(--nx-navy);
	color: var(--nx-on-navy);
}

.soker-promise__title {
	margin: 0 0 1rem;
	font-size: 1.15rem;
}

.soker-promise__card--no .soker-promise__title {
	color: var(--nx-on-navy);
}

.soker-promise__no-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	color: var(--nx-on-navy-muted);
}

.soker-promise__no-list li {
	display: flex;
	align-items: flex-start;
	gap: .5em;
}

.soker-promise__x {
	color: var(--nx-red-2);
	font-weight: 700;
	line-height: 1.5;
	flex-shrink: 0;
}

/* ==========================================================================
   About — trust row (visually extends the reused navy stats band)
   ========================================================================== */

.soker-about-trust {
	background-color: var(--nx-navy);
	color: var(--nx-on-navy-muted);
	text-align: center;
	padding-block: 1.5rem;
	border-block-start: 1px solid var(--nx-navy-2);
}

.soker-about-trust__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.soker-about-trust__line {
	margin: 0 0 .5rem;
	font-weight: 600;
}

.soker-about-trust__fine-print {
	margin: 0;
	font-size: .8rem;
}

/* ==========================================================================
   About — "נסיעה שניצלה בזמן" story card
   ========================================================================== */

.soker-story-card {
	background-color: var(--nx-subtle);
}

.soker-story-card__inner {
	max-width: 760px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.soker-story-card__card {
	background-color: var(--nx-surface);
	border-radius: var(--nx-radius-card);
	box-shadow: var(--nx-shadow-soft);
	padding: 2rem;
	text-align: center;
}

.soker-story-card__icon {
	display: block;
	font-size: 2rem;
	margin-block-end: .75rem;
}

.soker-story-card__title {
	margin: 0 0 .75rem;
}

.soker-story-card__text {
	color: var(--nx-body);
	margin: 0 0 1rem;
}

.soker-story-card__meta {
	color: var(--nx-ink-muted);
	font-size: .875rem;
	margin: 0;
}

/* ==========================================================================
   Contact — request-form card + navy contact-details card
   ========================================================================== */

.soker-contact-band {
	background-color: var(--nx-subtle);
}

.soker-contact-band__inner {
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	align-items: start;
}

.soker-contact-band__form {
	background-color: var(--nx-surface);
	border-radius: var(--nx-radius-card);
	box-shadow: var(--nx-shadow-soft);
	padding: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
}

.soker-contact-band__form-heading {
	margin: 0 0 .35rem;
}

.soker-contact-band__form-sub {
	color: var(--nx-ink-muted);
	margin: 0 0 1.5rem;
}

.soker-contact-band__privacy {
	color: var(--nx-ink-muted);
	font-size: .8rem;
	margin: 1rem 0 0;
}

@media (min-width: 860px) {
	.soker-contact-band__inner {
		grid-template-columns: 1.2fr .8fr;
	}
}

.soker-contact-card {
	background-color: var(--nx-navy);
	color: var(--nx-on-navy);
	border-radius: var(--nx-radius-card);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.soker-contact-card__whatsapp {
	justify-content: center;
}

.soker-contact-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.soker-contact-card__list li {
	display: flex;
	align-items: center;
	gap: .6em;
	padding-block-end: 1rem;
	border-block-end: 1px solid var(--nx-navy-2);
}

.soker-contact-card__list li:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.soker-contact-card__list a {
	color: var(--nx-on-navy);
	text-decoration: none;
}

.soker-contact-card__icon {
	flex-shrink: 0;
}

.soker-contact-card__note {
	color: var(--nx-on-navy-muted);
	font-size: .85rem;
	margin: 0;
}

/* ==========================================================================
   Contact — Fluent Forms re-skin (brand tokens instead of plugin defaults)
   ========================================================================== */

.soker-contact-band__form-embed .ff-el-group {
	margin-block-end: 1.1rem;
}

.soker-contact-band__form-embed .ff-el-input--label label {
	font-weight: 600;
	color: var(--nx-ink);
	font-size: .95rem;
	margin-block-end: .35rem;
}

.soker-contact-band__form-embed .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	color: var(--nx-red);
}

.soker-contact-band__form-embed .ff-el-form-control {
	inline-size: 100%;
	min-block-size: 48px;
	padding: .65rem .9rem;
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius-btn);
	background-color: var(--nx-surface);
	color: var(--nx-ink);
	font-family: var(--nx-font-body);
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.soker-contact-band__form-embed textarea.ff-el-form-control {
	min-block-size: 6rem;
	resize: vertical;
}

.soker-contact-band__form-embed .ff-el-form-control::placeholder {
	color: var(--nx-ink-muted);
	opacity: .7;
}

.soker-contact-band__form-embed .ff-el-form-control:focus {
	outline: none;
	border-color: var(--nx-red);
	box-shadow: 0 0 0 3px rgba(238, 74, 43, .15);
}

.soker-contact-band__form-embed .ff-el-is-error .ff-el-form-control {
	border-color: var(--nx-red-ink);
}

.soker-contact-band__form-embed .error.text-danger,
.soker-contact-band__form-embed .ff-el-is-error .error {
	color: var(--nx-red-ink);
	font-size: .85rem;
	margin-block-start: .3rem;
}

.soker-contact-band__form-embed .ff_btn_style,
.soker-contact-band__form-embed .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 48px;
	padding: .75em 1.5em;
	border: 0;
	border-radius: var(--nx-radius-btn);
	background-color: var(--nx-red-ink) !important;
	color: var(--nx-on-accent) !important;
	font-family: var(--nx-font-body);
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
	transition: box-shadow .15s ease, transform .15s ease, background-color .15s ease;
}

.soker-contact-band__form-embed .ff-btn-submit:hover,
.soker-contact-band__form-embed .ff-btn-submit:focus-visible {
	box-shadow: var(--nx-shadow-soft);
	transform: translateY(-1px);
}

.soker-contact-band__form-embed .ff-message-success {
	border: 1px solid var(--nx-green);
	border-radius: var(--nx-radius-card);
	background-color: var(--nx-subtle);
	color: var(--nx-ink);
	padding: 1.25rem 1.5rem;
	box-shadow: none;
}

/* ==========================================================================
   Contact — Typeform-style stepper (progressive one-question form; the
   chrome is injected by assets/form-steps.js; without JS the form renders
   as a normal single page)
   ========================================================================== */

/* Big conversational fields. */
.soker-typeform .ff-el-input--label label {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--nx-ink);
}

.soker-typeform .ff-el-form-control {
	font-size: 1.1rem;
	padding: .95rem 1.1rem;
	background-color: var(--nx-subtle);
	border: 1px solid transparent;
	border-radius: var(--nx-radius-btn);
	transition: background-color .15s ease, border-color .15s ease;
}

.soker-typeform .ff-el-form-control:focus {
	background-color: var(--nx-surface);
	border-color: var(--nx-red-ink);
	outline: none;
}

/* Pre-paint: html.soker-steps-js is set in <head> on the contact page, so
   the later field groups are hidden before form-steps.js loads — prevents
   the stepper-collapse layout shift. No-JS browsers never get the class. */
.soker-steps-js .soker-typeform:not(.soker-typeform--ready) .ff-el-group ~ .ff-el-group {
	display: none;
}

/* Stepper mode: one group at a time. */
.soker-steps .ff-el-group {
	display: none;
}

.soker-steps .ff-el-group.soker-step--active {
	display: block;
	animation: soker-step-in .25s cubic-bezier(0, 0, .2, 1) both;
}

@keyframes soker-step-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.soker-steps .ff-el-group.soker-step--active {
		animation: none;
	}
}

/* Empty-required nudge. */
.soker-step--nudge .ff-el-form-control {
	border-color: var(--nx-red-ink);
}

.soker-steps__progress {
	margin-block-end: 1.5rem;
}

.soker-steps__bar {
	block-size: 4px;
	border-radius: var(--nx-radius-pill);
	background-color: var(--nx-line);
	overflow: hidden;
}

.soker-steps__bar-fill {
	display: block;
	block-size: 100%;
	inline-size: 0;
	background-color: var(--nx-red);
	border-radius: var(--nx-radius-pill);
	transition: inline-size .3s cubic-bezier(0, 0, .2, 1);
}

.soker-steps__count {
	color: var(--nx-ink-muted);
	font-size: .85rem;
	margin: .6rem 0 0;
}

.soker-steps__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-block-start: 1.5rem;
}

.soker-steps__next {
	margin-inline-start: auto;
	min-inline-size: 9rem;
	justify-content: center;
	font-size: 1.05rem;
	border: 0;
	cursor: pointer;
}

.soker-steps__back {
	background: none;
	border: 0;
	padding: .5rem .25rem;
	color: var(--nx-ink-muted);
	font-weight: 600;
	font-size: .95rem;
	cursor: pointer;
}

.soker-steps__back:hover,
.soker-steps__back:focus-visible {
	color: var(--nx-ink);
	text-decoration: underline;
}

/* ==========================================================================
   Contact — FAQ strip
   ========================================================================== */

/* Two columns on desktop: an intro column (kicker, heading, WhatsApp nudge)
   beside the accordion; hairline-separated items, plus/minus marker,
   first item open. */
.soker-faq {
	background-color: var(--nx-surface);
}

.soker-faq__inner {
	max-width: 1040px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	display: grid;
	gap: 2.5rem;
}

.soker-faq__kicker,
.soker-faq__heading {
	text-align: start;
}

.soker-faq__heading {
	margin-block-end: .75rem;
}

.soker-faq__lead {
	color: var(--nx-ink-muted);
	margin: 0 0 1.5rem;
	max-inline-size: 22rem;
}

.soker-faq__wa {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-block-size: 2.9rem;
	padding-inline: 1.4rem;
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius-btn);
	color: var(--nx-navy);
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}

.soker-faq__wa:hover,
.soker-faq__wa:focus-visible {
	border-color: var(--nx-red-ink);
	color: var(--nx-red-ink);
}

.soker-faq__list {
	display: flex;
	flex-direction: column;
}

.soker-faq__item {
	border-block-start: 1px solid var(--nx-line);
	padding: .35rem 0;
}

.soker-faq__item:last-child {
	border-block-end: 1px solid var(--nx-line);
}

.soker-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--nx-ink);
	padding-block: 1rem;
	list-style: none;
}

.soker-faq__question::-webkit-details-marker {
	display: none;
}

/* Plus that becomes minus when open. */
.soker-faq__marker {
	position: relative;
	flex-shrink: 0;
	inline-size: 1.6rem;
	block-size: 1.6rem;
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius-pill);
	transition: background-color .2s ease, border-color .2s ease;
}

.soker-faq__marker::before,
.soker-faq__marker::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: .7rem;
	block-size: 2px;
	background-color: var(--nx-navy);
	translate: -50% -50%;
	transition: rotate .2s ease, background-color .2s ease;
}

html[dir="rtl"] .soker-faq__marker::before,
html[dir="rtl"] .soker-faq__marker::after {
	translate: 50% -50%;
}

.soker-faq__marker::after {
	rotate: 90deg;
}

.soker-faq__item[open] .soker-faq__marker {
	background-color: var(--nx-red-ink);
	border-color: var(--nx-red-ink);
}

.soker-faq__item[open] .soker-faq__marker::before,
.soker-faq__item[open] .soker-faq__marker::after {
	background-color: #fff;
}

.soker-faq__item[open] .soker-faq__marker::after {
	rotate: 0deg;
}

.soker-faq__answer {
	color: var(--nx-ink-muted);
	line-height: 1.65;
	margin: 0;
	padding-block-end: 1.15rem;
	max-inline-size: 34rem;
}

/* Smooth open/close: animate the details content height (and fade the
   answer) instead of snapping the page. Browsers without
   interpolate-size / ::details-content simply toggle instantly; the
   global reduced-motion reset collapses the transitions. */
@supports (interpolate-size: allow-keywords) {
	.soker-faq__item {
		interpolate-size: allow-keywords;
	}

	.soker-faq__item::details-content {
		block-size: 0;
		overflow: clip;
		opacity: 0;
		transition:
			block-size .3s cubic-bezier(0, 0, .2, 1),
			opacity .25s ease,
			content-visibility .3s allow-discrete;
	}

	.soker-faq__item[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
}

@media (min-width: 900px) {
	.soker-faq__inner {
		grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
		gap: 4rem;
		align-items: start;
	}
}

/* ==========================================================================
   Motion — scroll reveals (CSS scroll-driven; fade + translateY, once per
   element). Gated behind BOTH feature support and the user's motion
   preference; outside those gates every element renders in its normal,
   final, fully-visible state — no JS, nothing stuck mid-animation.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {

		/* NOTE: the hero + about-hero are deliberately EXCLUDED — they are
		   above-the-fold LCP content and must always render solid. */
		.soker-section__heading,
		.soker-section__subhead,
		.soker-trust__logos,
		.soker-founder-story__text,
		.soker-founder-story__quote,
		.soker-cta-final__inner,
		.soker-contact-band__form,
		.soker-contact-card,
		.soker-kosher__card,
		.soker-story-card__card {
			animation: soker-reveal-up .6s cubic-bezier(0, 0, .2, 1) both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}

		.soker-segment-card,
		.soker-service,
		.soker-why-card,
		.soker-package,
		.soker-testimonial,
		.soker-svc-card,
		.soker-world-card,
		.soker-process-card,
		.soker-stat {
			animation: soker-reveal-up .6s cubic-bezier(0, 0, .2, 1) both;
			animation-timeline: view();
			animation-range: entry 0% entry 35%;
		}

		/* Stagger repeated card grids: each successive card's range starts a
		   little later so the group reveals in sequence, not all at once. */
		.soker-segment-card:nth-child(2),
		.soker-service:nth-child(2),
		.soker-why-card:nth-child(2),
		.soker-package:nth-child(2),
		.soker-testimonial:nth-child(2),
		.soker-svc-card:nth-child(2),
		.soker-world-card:nth-child(2),
		.soker-process-card:nth-child(2),
		.soker-stat:nth-child(2) {
			animation-range: entry 4% entry 39%;
		}

		.soker-segment-card:nth-child(3),
		.soker-service:nth-child(3),
		.soker-why-card:nth-child(3),
		.soker-package:nth-child(3),
		.soker-testimonial:nth-child(3),
		.soker-svc-card:nth-child(3),
		.soker-world-card:nth-child(3),
		.soker-process-card:nth-child(3),
		.soker-stat:nth-child(3) {
			animation-range: entry 8% entry 43%;
		}

		.soker-service:nth-child(4),
		.soker-why-card:nth-child(4),
		.soker-svc-card:nth-child(4),
		.soker-process-card:nth-child(4),
		.soker-stat:nth-child(4) {
			animation-range: entry 12% entry 47%;
		}

		.soker-service:nth-child(5),
		.soker-svc-card:nth-child(5) {
			animation-range: entry 16% entry 51%;
		}
	}
}

@keyframes soker-reveal-up {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   Motion — page-view (load) entrance. The hero/page-hero are excluded from
   the scroll-driven reveals (LCP), so they get a short, time-driven
   entrance stagger instead: kicker → title → subhead → CTAs, with the
   photo panel fading in alongside. Runs once on load; reduced-motion
   users get everything solid immediately.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.soker-hero__kicker,
	.soker-hero__title,
	.soker-hero__subhead,
	.soker-hero__actions,
	.soker-page-hero__kicker,
	.soker-page-hero__title,
	.soker-page-hero__subhead,
	.soker-page-hero__actions,
	.soker-about-hero__kicker,
	.soker-about-hero__title,
	.soker-about-hero__subhead {
		animation: soker-enter-up .5s cubic-bezier(0, 0, .2, 1) both;
	}

	.soker-hero__title,
	.soker-page-hero__title,
	.soker-about-hero__title {
		animation-delay: .08s;
	}

	.soker-hero__subhead,
	.soker-page-hero__subhead,
	.soker-about-hero__subhead {
		animation-delay: .16s;
	}

	.soker-hero__actions,
	.soker-page-hero__actions {
		animation-delay: .24s;
	}

	/* The hero photo is the LCP element, so it must NOT start at opacity 0.
	   The about-page visual can use the lightweight entrance treatment. */
	.soker-about-hero__visual {
		animation: soker-enter-fade .7s ease both;
	}
}

@keyframes soker-enter-up {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes soker-enter-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Inside the mobile swipe carousels the nearest scroll container is
   horizontal, which makes view() timelines unreliable (cards could render
   stuck at the animation's start state). Opt those cards out of the
   scroll-driven reveal on carousel breakpoints. */
@media (max-width: 779px) {
	.soker-segment-card,
	.soker-testimonial,
	.soker-svc-card {
		animation: none;
	}
}

@media (max-width: 899px) {
	.soker-package {
		animation: none;
	}
}

/* ==========================================================================
   Motion — card hover/focus micro-interactions (transform + box-shadow
   only). Mouse-only via (hover: hover); keyboard focus gets the same
   feedback via :focus-within. The global reduced-motion reset in
   tokens.css already collapses these transitions to ~instant.
   ========================================================================== */

.soker-service,
.soker-svc-card,
.soker-world-card,
.soker-testimonial,
.soker-package {
	transition: transform .2s ease, box-shadow .2s ease;
}

@media (hover: hover) {
	.soker-service:hover,
	.soker-svc-card:hover,
	.soker-world-card:hover,
	.soker-testimonial:hover,
	.soker-package:hover {
		transform: translateY(-4px);
		box-shadow: var(--nx-shadow-soft);
	}
}

.soker-service:focus-within,
.soker-svc-card:focus-within,
.soker-world-card:focus-within,
.soker-testimonial:focus-within,
.soker-package:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--nx-shadow-soft);
}

/* ==========================================================================
   Mobile — hero & about-hero floating contact card (< 900px)
   Below the two-column breakpoint the photo stacks full-width; the
   floating card can no longer sit beside it (it would clip against
   `.soker-section`'s overflow:hidden or spill off-screen), so it becomes
   an in-flow card that overlaps the photo's bottom edge instead.
   ========================================================================== */

@media (max-width: 899px) {
	.soker-about-hero__visual {
		flex-direction: column;
		align-items: center;
	}

	.soker-about-hero__photo {
		max-inline-size: 100%;
		margin-inline: auto;
	}

	.soker-about-hero__card {
		position: relative;
		inset-inline-start: auto;
		inset-inline-end: auto;
		inset-block-start: auto;
		inset-block-end: auto;
		transform: none;
		inline-size: min(100%, 22rem);
		max-inline-size: 100%;
		margin-inline: auto;
		margin-block-start: -2rem;
		z-index: 4;
	}
}

/* ==========================================================================
   Mobile — related-card groups become swipe carousels (< 780px)
   Card grids that would stack into a long scroll (segments, packages,
   testimonials, service-detail cards) turn into horizontal scroll-snap
   carousels. A peek of the next card + snap points signal swipability;
   native RTL scrolling, no JS. Under reduced data/motion nothing changes —
   it's plain overflow scrolling.
   ========================================================================== */

@media (max-width: 779px) {
	.soker-testimonials__grid,
	.soker-svc-detail__grid {
		display: flex;
		gap: .9rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* Bleed to the viewport edge so the next card peeks in. */
		margin-inline: -1.25rem;
		padding-inline: 1.25rem;
		padding-block-end: .5rem;
		scrollbar-width: none;
	}

	.soker-testimonials__grid::-webkit-scrollbar,
	.soker-svc-detail__grid::-webkit-scrollbar {
		display: none;
	}

	.soker-testimonial,
	.soker-svc-card {
		flex: 0 0 82%;
		scroll-snap-align: center;
	}
}

@media (max-width: 899px) {
	/* Packages: the grid is the section inner itself. */
	.soker-packages__inner {
		display: flex;
		gap: .9rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-block-end: .5rem;
		scrollbar-width: none;
	}

	.soker-packages__inner::-webkit-scrollbar {
		display: none;
	}

	.soker-package {
		flex: 0 0 86%;
		scroll-snap-align: center;
	}
}

/* ==========================================================================
   Generic legal page template (page.php) — privacy / accessibility / terms.
   Readable prose column; RTL-safe (logical properties only).
   ========================================================================== */

.soker-legal {
	background-color: var(--nx-bg);
	padding-block: clamp(2.5rem, 2rem + 2vw, 4.5rem);
}

.soker-legal__inner {
	max-inline-size: 48rem;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.soker-legal__title {
	margin: 0 0 1.5rem;
}

.soker-legal__content {
	color: var(--nx-body);
}

.soker-legal__content h2,
.soker-legal__content h3 {
	margin-block: 2rem .75rem;
}

.soker-legal__content h2:first-child,
.soker-legal__content h3:first-child {
	margin-block-start: 0;
}

.soker-legal__content p {
	margin: 0 0 1rem;
}

.soker-legal__content ul,
.soker-legal__content ol {
	margin: 0 0 1rem;
	padding-inline-start: 1.5rem;
}

.soker-legal__content li {
	margin-block-end: .5rem;
}

.soker-legal__content a {
	color: var(--nx-red-ink);
	text-decoration: underline;
}

.soker-legal__content strong {
	color: var(--nx-ink);
}


/* ==========================================================================
   404
   ========================================================================== */

.soker-404 {
	background-color: var(--nx-bg);
	text-align: center;
}

.soker-404__inner {
	max-width: 620px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	padding-block: clamp(2rem, 1.5rem + 2vw, 4rem);
}

.soker-404__code {
	font-size: clamp(4rem, 3rem + 6vw, 7rem);
	font-weight: 800;
	line-height: 1;
	color: var(--nx-red);
	margin: 0 0 .5rem;
}

.soker-404__title {
	margin: 0 0 .75rem;
}

.soker-404__text {
	color: var(--nx-ink-muted);
	margin: 0 0 2rem;
}

.soker-404__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

.soker-404__ghost.nx-btn--ghost {
	border-color: var(--nx-navy);
	color: var(--nx-navy);
}