/* ===== 9Senses Jobs — embossed job carousel + single ad + fog application dialog ===== */

/* =====================================================================
 * TOKEN REGISTRY — the single place a value is stated.
 * Names in the right-hand comments are the design book's own.
 * ===================================================================== */
:root{
	/* --- colour --- */
	--nsj-accent:#58A7F9;                                   /* ACCENT */
	--nsj-card-bg:#0E1834;                                  /* CARD-BG */
	--nsj-wash:rgba(255,255,255,0.075);                     /* WASH-BLOCK */
	--nsj-body-ink:#D3D3D3;                                 /* BODY-COLOUR */
	--nsj-title-ink:#d6d6d6;                                /* post-display title */
	--nsj-chevron:#B3B3B3;                                  /* BAR-MUTED */
	--nsj-chevron-hover:#ffffff;
	--nsj-transparent:rgba(255,255,255,0);                  /* TRANSPARENT */

	/* --- type --- */
	--nsj-font-head:'Special Elite','Courier New',Courier,monospace;
	--nsj-font-body:'Open Sans',Helvetica,Arial,sans-serif;
	--nsj-type-body:clamp(15px, 1.778vw, 16px);             /* TYPE-BODY */
	--nsj-lh-body:1.7em;
	--nsj-type-card-title:clamp(18px, 1.833vw, 22px);       /* TYPE-H3-CARD */
	--nsj-lh-card-title:1.15em;
	--nsj-type-eyebrow:clamp(15px, 1.333vw, 16px);          /* TYPE-EYEBROW */
	--nsj-lh-eyebrow:1.7em;
	--nsj-track-eyebrow:0.05em;
	--nsj-type-block-head:clamp(19px, 2.000vw, 24px);       /* TYPE-H3-BLOCK */
	--nsj-lh-block-head:1.2em;
	--nsj-type-h2:clamp(24px, 2.667vw, 32px);               /* TYPE-H2 */
	--nsj-lh-h2:1.25em;
	--nsj-heading-ink:rgba(214,214,214,0.88);
	--nsj-weight-body:400;
	--nsj-weight-strong:600;

	/* --- the emboss, verbatim from the design baseline --- */
	--nsj-emboss:inset 0 10px 16px -10px rgba(255,255,255,0.12),
	             inset 10px 0 16px -10px rgba(255,255,255,0.08),
	             inset 0 -10px 16px -10px rgba(0,0,0,0.30),
	             inset -10px 0 16px -10px rgba(0,0,0,0.22);
	/* --- the card panel shadow (preset2 6/6/18 -> 9/9/24) --- */
	--nsj-card-shadow:6px 6px 18px 0 rgba(255,255,255,0.3);
	--nsj-card-shadow-hover:9px 9px 24px 0 rgba(255,255,255,0.3);
	--nsj-card-radius:0 0 5px 0;

	/* --- block geometry --- */
	--nsj-block-inset-top:clamp(27px, 3.083vw, 37px);       /* BLOCK-INSET */
	--nsj-block-inset-bottom:clamp(20px, 2.833vw, 34px);
	--nsj-block-inset-side:24px;
	--nsj-block-margin-top:36px;                            /* BLOCK-MARGIN */
	--nsj-block-margin-bottom:40px;
	--nsj-card-gap:24px;                                    /* CARD-GAP */
	--nsj-card-pad:clamp(12px, 1.2vw, 18px);
	--nsj-card-base-width:270px;
	--nsj-card-max-width:550px;

	/* The side inset is SPLIT between the frame and the track, and the split is
	   asymmetric because the card shadow is: a CSS blur reaches half its radius
	   past the shadow edge, so 6/6/18 reaches 6+9=15px right of a card and
	   9-6=3px left of it. The track is the clipper, so its padding is a window
	   onto the off-screen neighbours — 15 right shows a card its whole right
	   glow and none of its neighbour's, 8 left shows its 3px left glow and stays
	   clear. Copied from the reference frame; do not average them. */
	--nsj-band-l:8px;
	--nsj-band-r:15px;
	/* Vertical track padding is shadow room, not inset: the track is
	   overflow-y:hidden, so without it the panel shadow is clipped flat.
	   24 bottom clears the shadow's 15px reach, 12 top clears its 3px. */
	--nsj-track-pad-t:12px;
	--nsj-track-pad-b:24px;
	--nsj-nav-w:24px;
	--nsj-nav-h:26px;
	--nsj-nav-size:25px;

	/* --- the page CTA button (rulebook: aside CTA button) --- */
	--nsj-cta-ink:#ffffff;
	--nsj-cta-size:clamp(18px, 1.6vw, 22px);
	--nsj-cta-size-hover:clamp(19px, 1.67vw, 23px);
	--nsj-cta-track:2px;
	--nsj-cta-weight:500;
	--nsj-cta-pad:0.3em 1em;                                /* Divi button default */
	--nsj-cta-lh:1.7em;

	/* --- fog dialog: the SIDEBAR's palette, not a copy of it ---
	   9senses-sidebar publishes these on :root, so the application dialog and
	   the contact dialog resolve to the same colours by construction and
	   cannot drift. The literals are the sidebar's own fallbacks. */
	--nsj-dlg-ink:var(--ns-plugin-site-bg, #222b3f);
	--nsj-dlg-ink-rgb:var(--ns-plugin-site-bg-rgb, 34,43,63);
	--nsj-dlg-panel:var(--ns-plugin-site-fg, #cfcfcf);

	/* --- single ad --- */
	--nsj-pd-rail:280px;
	--nsj-pd-gutter:2.5rem;
	--nsj-pd-lead:44px;
	--nsj-pd-title:clamp(30px, 4.4vw, 56px);
	--nsj-pd-title-lh:1.18;
	--nsj-pd-title-track:0.04em;
	--nsj-pd-rule:rgba(200,206,218,.32);
	--nsj-pd-glow:0 0 8px rgba(175,200,255,.55), 0 0 16px rgba(160,190,255,.28);
	--nsj-pd-stack:782px;
	--nsj-pd-flat:1024px;

	/* --- fog dialog (the sidebar's aesthetic, a separate system) --- */
	--nsj-fog:rgba(207,207,207,.88);
	--nsj-fog-ink:#222b3f;
	--nsj-fog-strong:#0d1530;
	--nsj-fog-radius:8px;
	--nsj-mobile:640px;
}

/* =====================================================================
 * THE EMBOSSED BLOCK
 * The wash and the four-sided inset emboss, on the plugin's own element so
 * a page carries only the block rhythm. Fluid by design: every container it
 * lands in is already at or below the 1080 measure, so a cap here would only
 * fight the page.
 *
 * There is no frame head. The block's top inset is therefore the BLOCK-INSET
 * top in full, and the frame takes whatever the track's shadow room does not
 * already supply. max() keeps it valid where the clamp floor is below the
 * track padding.
 *
 * visibility is gated here as well as on the wrap so an empty box never paints
 * before the cards have been sized into it; the bootstrap lifts both together.
 * ===================================================================== */
.nsj-frame{
	position:relative; box-sizing:border-box; visibility:hidden;
	margin:0;
	padding:max(0px, calc(var(--nsj-block-inset-top) - var(--nsj-track-pad-t)))
	        calc(var(--nsj-block-inset-side) - var(--nsj-band-r))
	        max(0px, calc(var(--nsj-block-inset-bottom) - var(--nsj-track-pad-b)))
	        calc(var(--nsj-block-inset-side) - var(--nsj-band-l));
	background:var(--nsj-wash);
	box-shadow:var(--nsj-emboss);
	border-radius:0;
	hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto;
}
/* The frame's padding is the whole spacing story — the wrap adds none. */
.nsj-frame > .nsj-carousel-wrap{ margin:0 !important; padding:0 !important; }
/* An optional heading, INSIDE the block. Its side padding matches the track's
   own band, so the first letter of the heading sits exactly above the first
   card's left edge whatever the band split is. The /jobs/ listing passes no
   heading; "Other openings" on an ad does. */
.nsj-frame-head{
	padding:0 var(--nsj-band-r) clamp(10px, 1vw, 14px) var(--nsj-band-l);
}
.nsj-frame-head h2{
	margin:0 !important; padding:0 !important;
	font-family:var(--nsj-font-head) !important; font-weight:var(--nsj-weight-body) !important;
	font-size:var(--nsj-type-h2) !important; line-height:var(--nsj-lh-h2) !important;
	color:var(--nsj-heading-ink) !important; text-align:left; letter-spacing:0 !important;
	text-transform:none !important;
}

/* =====================================================================
 * CAROUSEL
 * ===================================================================== */
.nsj-carousel-wrap{ position:relative; margin:0; padding:0; visibility:hidden; }
/* The track is a native horizontal scroller, so swipe and momentum come from
   the browser. Its horizontal padding participates in scrollWidth and therefore
   in the treadmill's wrap-around point — it is the band, and it is not free to
   change for looks. */
.nsj-carousel{
	display:flex; column-gap:var(--nsj-card-gap);
	padding:var(--nsj-track-pad-t) var(--nsj-band-r) var(--nsj-track-pad-b) var(--nsj-band-l);
	overflow-x:auto; overflow-y:hidden; overflow-anchor:none;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:auto;
}
.nsj-carousel::-webkit-scrollbar{ width:0; height:0; display:none; }

/* Chevrons: the project/people carousel's — the Divi ETmodules glyph, grey,
   no circle, no border, brightening on hover. They are seated IN the band
   between the frame edge and the first/last card, never outside the block.
   The old -42px offset put them past the page edge whenever the row reached
   it, which is where /jobs/ got its 42px of horizontal overflow.
   --nsj-nav-top is written by the layout JS: the top of the excerpt text. */
.nsj-nav{
	position:absolute; top:var(--nsj-nav-top, 50%); transform:translateY(-50%); z-index:3;
	width:var(--nsj-nav-w); height:var(--nsj-nav-h); cursor:pointer; padding:0;
	border:0; background:none; border-radius:0; box-shadow:none;
	color:var(--nsj-chevron); display:flex; align-items:center; justify-content:center;
	opacity:.85; transition:opacity .3s ease, color .3s ease;
}
.nsj-nav .et-pb-icon, .nsj-nav-icon{
	font-family:ETmodules !important; font-weight:var(--nsj-weight-body) !important;
	font-size:var(--nsj-nav-size) !important; line-height:1 !important;
}
.nsj-nav:hover{ color:var(--nsj-chevron-hover); opacity:1; }
.nsj-nav[disabled]{ opacity:.25; cursor:default; }
.nsj-prev{ left:calc(-1 * (var(--nsj-block-inset-side) - var(--nsj-band-l))); }
.nsj-next{ right:calc(-1 * (var(--nsj-block-inset-side) - var(--nsj-band-r))); }

/* --- the card panel --- */
.nsj-card{
	flex:0 0 var(--nsj-card-base-width); box-sizing:border-box;
	background:var(--nsj-card-bg); border:0;
	box-shadow:var(--nsj-card-shadow);
	border-radius:var(--nsj-card-radius); position:relative;
	transition:box-shadow .3s ease;
	display:flex; flex-direction:column; align-items:flex-start; text-align:start;
	padding:var(--nsj-card-pad);
	max-width:var(--nsj-card-max-width); min-width:0;
}
/* THE ONLY hover state a tile has is the glow. Not the title colour, not an
   outline, not the excerpt — the reference card changes its shadow and nothing
   else, and its title link is pinned to `inherit` on hover precisely so the
   theme cannot recolour it. Keyboard focus uses the same glow rather than a
   focus ring, so there is one visual language on this card and no blue box. */
.nsj-card:hover, .nsj-card:focus-within{ box-shadow:var(--nsj-card-shadow-hover); }
/* The whole tile is the click target (see the click handler in the footer
   script). The inner anchors stay real anchors, so keyboard, middle-click and
   "copy link address" all keep working. */
.nsj-card{ cursor:pointer; }
.nsj-card .nsj-card-title{
	font-family:var(--nsj-font-head) !important; font-weight:var(--nsj-weight-body) !important;
	font-size:var(--nsj-type-card-title) !important; line-height:var(--nsj-lh-card-title) !important;
	color:var(--nsj-accent) !important; margin:0 0 clamp(8px, .9vw, 14px); padding:0;
	/* A flex child with no explicit cross size shrinks to its content, and the
	   browser then computes hyphenation opportunities against the wrong width —
	   so a long single word overflows instead of breaking. Stretch first. */
	align-self:stretch !important; width:100% !important; min-width:0 !important; max-width:100% !important;
	white-space:normal !important; word-break:normal !important;
	hyphens:auto !important; -webkit-hyphens:auto !important; -moz-hyphens:auto !important; -ms-hyphens:auto !important;
	hyphenate-limit-chars:6 3 3;
	overflow-wrap:break-word !important; word-wrap:break-word !important;
}
.nsj-card-titlelink, .nsj-card-titlelink:visited, .nsj-card-titlelink:hover, .nsj-card-titlelink:focus{
	color:inherit !important; text-decoration:none !important;
	font:inherit !important; letter-spacing:inherit !important;
}
a.nsj-card-more, a.nsj-card-more:hover, a.nsj-card-more:focus{
	color:var(--nsj-accent) !important; text-decoration:none !important;
}

/* Divi styles .entry-content ul/li with left padding and markers, which is what
   pushed the chip rows off the card's left edge. Reset hard, as the person
   cards do. */
.nsj-card-meta{
	display:flex !important; flex-wrap:wrap !important; gap:6px 6px !important;
	list-style:none !important; margin:2px 0 12px !important; padding:0 !important;
	align-self:stretch !important; width:100% !important; min-width:0 !important;
	text-align:left !important; line-height:1.2 !important;
	justify-content:flex-start !important; align-content:flex-start !important;
}
.nsj-card-meta li{
	margin:0 !important; padding:0 !important; list-style:none !important;
	text-indent:0 !important; display:inline-flex !important;
}
.nsj-card-meta li::before, .nsj-card-meta li::after{ content:none !important; display:none !important; }

/* Location badges = the profile card's fog chips: ink on a solid fog band with
   a blurred halo behind it. */
.nsj-loc{
	display:inline-flex; align-items:center; justify-content:center;
	position:relative; isolation:isolate; box-sizing:border-box;
	margin:0; padding:3px 5px; min-height:20px; border:0; background:transparent;
	color:var(--nsj-fog-ink); border-radius:2px;
	font-family:var(--nsj-font-body) !important;
	font-size:11.5px !important; line-height:1.12 !important; font-weight:var(--nsj-weight-strong) !important;
	letter-spacing:0 !important; white-space:nowrap;
}
.nsj-loc::before{
	content:""; position:absolute; inset:-2px; z-index:-2; pointer-events:none;
	border-radius:3px; background:var(--nsj-fog); filter:blur(2.2px);
}
.nsj-loc::after{
	content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
	border-radius:2px; background:var(--nsj-fog);
	box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 1px 2px rgba(0,0,0,.13);
}
/* Body copy takes the page's own colour token where the page publishes one. */
.nsj-card .nsj-card-excerpt{
	font-family:var(--nsj-font-body) !important;
	font-size:var(--nsj-type-body) !important; line-height:var(--nsj-lh-body) !important;
	letter-spacing:0 !important;
	color:var(--ns-body-color, var(--nsj-body-ink)) !important;
	margin:0 0 2px; padding:0; display:block !important; text-align:justify !important;
	align-self:stretch !important; width:100% !important; min-width:0 !important; max-width:100% !important;
	white-space:normal !important; word-break:normal !important;
	hyphens:auto !important; -webkit-hyphens:auto !important; -moz-hyphens:auto !important; -ms-hyphens:auto !important;
	overflow-wrap:break-word !important; word-wrap:break-word !important;
}
/* margin-top:auto absorbs the leftover column space, so "read more" sits on the
   same baseline in every card however long the copy above it runs. Cards are
   stretched to equal height by the track, so without it they read ragged. */
.nsj-card-more{
	margin-top:auto; padding-top:clamp(6px, .6vw, 10px); align-self:flex-end; text-align:right;
	font-family:var(--nsj-font-body) !important;
	font-size:var(--nsj-type-body) !important; font-weight:var(--nsj-weight-strong) !important;
	color:var(--nsj-accent) !important; letter-spacing:.01em;
}
.nsj-empty{
	text-align:center; color:var(--ns-body-color, var(--nsj-body-ink));
	font-size:var(--nsj-type-body); margin:0;
}

/* =====================================================================
 * SINGLE JOB AD — the news post-display layout.
 * Ported from ninesenses-landing's ns-pd-* rules and kept level with them:
 * the eyebrow row (teaser left, nothing right — a job ad carries no date),
 * the rail as ONE variable, and the separator spanning the range the
 * positioner publishes rather than the whole grid.
 * ===================================================================== */
.nsj-single-job .entry-title{ display:none !important; }
.nsj-single-job .post-meta,
.nsj-single-job .et_pb_post_meta,
.nsj-single-job .et_pb_title_meta_container{ display:none !important; }

/* A job ad is SAVED with Divi's no-sidebar layout (_et_pb_page_layout), so the
   template renders full width by itself — nothing is overridden here. */
.nsj-pd{ padding-top:var(--nsj-pd-gutter); margin-top:20px; }
.nsj-pd-eyerow{
	display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
	padding-right:var(--nsj-pd-rail); margin:0 0 .5rem;
}
.nsj-pd-teaser{
	font-family:var(--nsj-font-head); font-weight:var(--nsj-weight-body);
	color:var(--nsj-accent); font-size:var(--nsj-type-eyebrow);
	line-height:var(--nsj-lh-eyebrow); text-transform:uppercase;
	letter-spacing:var(--nsj-track-eyebrow); margin:0;
}
.nsj-pd-gridded{
	display:grid; grid-template-columns:minmax(0,1fr) var(--nsj-pd-rail);
	column-gap:0; position:relative;
}
.nsj-pd-titlewrap{ grid-column:1; grid-row:1; padding-right:var(--nsj-pd-gutter); }
.nsj-pd-title{
	font-family:var(--nsj-font-head) !important; font-weight:var(--nsj-weight-body);
	color:var(--nsj-title-ink) !important; font-size:var(--nsj-pd-title);
	line-height:var(--nsj-pd-title-lh); letter-spacing:var(--nsj-pd-title-track);
	margin:0 0 calc(.17em - 15px) !important;
}
.nsj-pd-gridded > .nsj-pd-excerpt{ grid-column:1; grid-row:2; }
.nsj-pd-gridded > .nsj-pd-body{ grid-column:1; grid-row:3; min-width:0; padding-right:var(--nsj-pd-gutter); }
/* The rail box is TALL and STATIC. Tall so the Apply button inside it has room
   to travel; static so everything else in it scrolls out of the viewport with
   the rest of the page. Those two jobs were in conflict only while one element
   was doing both. */
.nsj-pd-gridded > .nsj-pd-arest{
	grid-column:2; grid-row:3; padding-top:0; padding-left:var(--nsj-pd-gutter);
	position:relative; align-self:stretch;
}
.nsj-pd-chead{ margin-top:0 !important; }
/* The news logo slot: absolutely positioned at the top of column 2, above the
   rail and outside the separator. It carries the vectormap. --nsj-pd-ex-h is
   the room the map's own excerpt needs; the positioner drops the excerpt
   (.nsj-pd-noex) when the map would otherwise reach into the rail. */
.nsj-pd-gridded > .nsj-pd-top{
	position:absolute; top:0; right:0; width:var(--nsj-pd-rail);
	padding-left:var(--nsj-pd-gutter); box-sizing:border-box;
}
.nsj-pd-top.nsj-pd-map{ --nsj-pd-ex-h:140px; }
.nsj-pd-top.nsj-pd-map.nsj-pd-noex{ --nsj-pd-ex-h:0px; }
.nsj-pd-top.nsj-pd-map.nsj-pd-noex .ns-vmap-shell > .ns-vmap-detail{ display:none !important; }
.nsj-pd-top.nsj-pd-map > *{ max-width:100%; }
.nsj-pd-top.nsj-pd-map .ns-vmap{ margin-left:0; margin-right:0; max-width:100%; }
/* Apply is the one element that stays, and it comes to rest one gutter BELOW
   the fixed header rather than behind it.

   The offset is measured at runtime, never stated. The bars above it are not one
   height: the Divi header is 69px at the top of the page and 37px once scrolled,
   and a logged-in user has a 32px admin bar above that again. A constant is
   right for exactly one of those states and wrong for the rest, which is how the
   button ended up sitting inside the navigation. See nsjStickyOffset(). */
.nsj-pd-apply{ position:sticky; top:var(--nsj-sticky-top, 93px); margin-top:var(--nsj-card-gap); }
/* The separator spans the rail's CONTENT — the "Key facts" heading down to the
   foot of the Apply button — not the rail's box, which is now as tall as the
   article so Apply has somewhere to travel. The height comes from the
   positioner; 100% is the fallback if the script never runs, which errs long
   rather than leaving the column undivided.

   It is static, like the details, so it scrolls away with them. */
.nsj-pd-arest::before{
	content:""; position:absolute; left:0; top:0;
	height:var(--nsj-pd-rail-h, 100%);
	width:1px; background:var(--nsj-pd-rule); box-shadow:var(--nsj-pd-glow);
}
.nsj-pd-excerpt{
	font-style:italic; font-size:var(--nsj-type-body); line-height:var(--nsj-lh-body);
	color:var(--nsj-accent); padding-right:20%; margin:0;
}
.nsj-pd-excerpt, .nsj-pd-excerpt p{ color:var(--nsj-accent); font-family:inherit; font-style:italic; }
.nsj-pd-excerpt p{ font-size:var(--nsj-type-body); line-height:var(--nsj-lh-body); margin:0 !important; padding:0 !important; }
.nsj-pd-excerpt > *:first-child{ margin-top:0 !important; }

/* Body typography — the news body rules. */
.nsj-pd-body > *:first-child{ margin-top:var(--nsj-pd-lead) !important; }
.nsj-pd-body h2{ margin:35px 0 5px !important; }
.nsj-pd-body h3{ font-size:18px; margin:25px 0 5px !important; }
.nsj-pd-body p{ margin:0 0 .9em !important; padding-top:0 !important; padding-bottom:0 !important; }
.nsj-pd-body img{ max-width:100%; height:auto; }
.nsj-pd-gridded > .nsj-pd-body ul, .nsj-pd-gridded > .nsj-pd-body ol{ margin:0 0 .5em 1.4em !important; padding:0; }
.nsj-pd-gridded > .nsj-pd-body li:last-child{ margin-bottom:0 !important; }
.nsj-pd-gridded > .nsj-pd-body ul + *, .nsj-pd-gridded > .nsj-pd-body ol + *{ margin-top:0 !important; }
.nsj-pd-body li{ margin:.3em 0; }
.nsj-pd-body a{ color:var(--nsj-accent); }
.nsj-pd-body blockquote{ border:0 !important; margin:1.8em 0 !important; padding:0 0 0 50px !important; background:transparent !important; quotes:none; }
.nsj-pd-body blockquote p{ font-family:var(--nsj-font-head) !important; font-size:22px !important; line-height:1.4 !important; color:var(--nsj-accent) !important; text-align:right !important; font-style:normal !important; margin:0 0 .5em !important; }
.nsj-pd-body blockquote cite{ display:block !important; font-family:var(--nsj-font-body) !important; font-size:12px !important; font-style:normal !important; color:inherit !important; text-align:right !important; margin:-5px 0 0 !important; }
.nsj-pd-body blockquote p:last-child:not(:first-child){ font-family:var(--nsj-font-body) !important; font-size:12px !important; font-style:normal !important; color:inherit !important; text-align:right !important; line-height:1.5 !important; margin:-5px 0 0 !important; }
.nsj-pd-body blockquote p:last-child:not(:first-child) em,
.nsj-pd-body blockquote p:last-child:not(:first-child) i,
.nsj-pd-body blockquote p:last-child:not(:first-child) cite,
.nsj-pd-body blockquote p:last-child:not(:first-child) strong{ font-family:inherit !important; font-size:inherit !important; font-style:normal !important; font-weight:inherit !important; color:inherit !important; }
.nsj-pd-arest a{ color:var(--nsj-accent) !important; }
/* Neutralize backgrounds coming from the post's own content. */
.nsj-pd-body .et_pb_section, .nsj-pd-body .et_pb_row, .nsj-pd-body .et_pb_column,
.nsj-pd-body .et_pb_with_background, .nsj-pd-body .wp-block-group.has-background,
.nsj-pd-body .wp-block-cover{ background:transparent !important; }
.nsj-pd-body .alignleft{ float:left; margin:.2em 1.4em .8em 0; max-width:48%; }
.nsj-pd-body .alignright{ float:right; margin:.2em 0 .8em 1.4em; max-width:48%; }
.nsj-pd-body .aligncenter{ display:block; margin:1em auto; }
.nsj-pd-body figure{ margin:0 0 1em; }
.nsj-pd-body figure.alignleft, .nsj-pd-body figure.alignright{ max-width:48%; }
.nsj-pd-body::after{ content:""; display:block; clear:both; }

/* Aside (Apply + key facts). .nsj-pd-chead marks its first heading; the
   positioner cap-aligns it with the first body paragraph, or drops it below the
   Apply slot when that reaches further down. */
.nsj-pd-heading{ font-family:var(--nsj-font-head); font-size:var(--nsj-type-block-head); line-height:var(--nsj-lh-block-head); margin:0 0 5px; }
.nsj-pd-facts{ list-style:none !important; margin:0 0 var(--nsj-card-gap) !important; padding:0 !important; }
.nsj-pd-facts li{ list-style:none !important; margin:0 0 8px !important; padding:0 !important; text-indent:0 !important; }
.nsj-pd-facts li:last-child{ margin-bottom:0 !important; }
.nsj-pd-facts li::marker{ content:""; }
.nsj-pd-facts li::before, .nsj-pd-facts li::after{ content:none !important; display:none !important; }
.nsj-pd-factlabel{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:var(--nsj-track-eyebrow); opacity:.55; }
.nsj-pd-chips{ display:inline-flex; flex-wrap:wrap; gap:6px 8px; margin-top:0; }
.nsj-pd-actions{ margin-top:0; }
.nsj-pd-action{ display:block; margin:0; }
/* The "other openings" block below the ad carries the block rhythm. */
.nsj-pd-others{ margin-top:var(--nsj-block-margin-top); }

@media (max-width:1024px){
	.nsj-pd-eyerow{ padding-right:0; }
}
@media (max-width:782px){
	.nsj-pd-gridded{ grid-template-columns:1fr; }
	.nsj-pd-titlewrap, .nsj-pd-gridded > .nsj-pd-top, .nsj-pd-gridded > .nsj-pd-excerpt,
	.nsj-pd-gridded > .nsj-pd-body, .nsj-pd-gridded > .nsj-pd-arest{
		grid-column:1; grid-row:auto; align-self:auto; padding-right:0; padding-left:0;
	}
	.nsj-pd-gridded > .nsj-pd-top{ position:static; width:auto; }
	.nsj-pd-excerpt{ padding-right:0; }
	/* Stacked, the rail is not a rail: nothing to travel alongside. */
	.nsj-pd-gridded > .nsj-pd-arest{ position:static; }
	.nsj-pd-gridded > .nsj-pd-arest{ padding-top:1.5rem; margin-top:.5rem; border-top:1px solid var(--nsj-pd-rule); }
	.nsj-pd-arest::before{ display:none; }
	.nsj-pd-apply{ position:static; }
	.nsj-pd-chead{ margin-top:0 !important; }
}
/* The page CTA, not a dialog button. Same construction as every header CTA on
   the site: transparent panel, no border, no radius, Special Elite 500 with 2px
   tracking, and the preset2 white glow deepening on hover. The label also grows
   a step on hover, as the Divi button does. */
.nsj-apply-btn{
	display:block; width:100%; box-sizing:border-box;
	background:var(--nsj-transparent); color:var(--nsj-cta-ink);
	border:0; border-radius:0; padding:var(--nsj-cta-pad);
	cursor:pointer; text-align:center; text-decoration:none;
	font-family:var(--nsj-font-head); font-weight:var(--nsj-cta-weight);
	font-size:var(--nsj-cta-size); line-height:var(--nsj-cta-lh);
	letter-spacing:var(--nsj-cta-track);
	box-shadow:var(--nsj-card-shadow);
	transition:box-shadow .3s ease, font-size .3s ease;
}
.nsj-apply-btn:hover, .nsj-apply-btn:focus-visible{
	box-shadow:var(--nsj-card-shadow-hover);
	font-size:var(--nsj-cta-size-hover);
	outline:none;
}
.nsj-gone{ margin:1rem 0 2rem; font-size:17px; }

/* =====================================================================
 * OVERLAY + APPLICATION DIALOG
 * The sidebar's contact form is the reference, and this follows its
 * construction rather than approximating it. The thing the previous version
 * got backwards was the colour logic: the sidebar makes the SITE BACKGROUND
 * the ink and fills the fields with low-opacity tints OF THAT INK on the fog
 * panel. Filling them with white tints instead is what left the form reading
 * as pale boxes on a pale panel with borders that barely showed.
 *
 * The palette variables are the sidebar's own, read off :root, so the two
 * dialogs resolve to the same colours by construction.
 * ===================================================================== */
.nsj-overlay{
	display:none; position:fixed; inset:0; background:rgba(0,0,0,.55);
	z-index:2147483600; align-items:flex-start; justify-content:center;
	padding:24px; box-sizing:border-box;
	/* The overlay may scroll on a genuinely short viewport, but neither it nor
	   the dialog may show scrollbar chrome — wheel and touch still work. */
	overflow-x:hidden; overflow-y:auto;
	overscroll-behavior:contain; scrollbar-width:none;
}
.nsj-overlay::-webkit-scrollbar{ width:0; height:0; }
.nsj-overlay.open{ display:flex !important; }
.nsj-dialog{
	position:relative; background:transparent; color:var(--nsj-dlg-ink);
	border-radius:14px;
	width:100%; max-width:860px;
	padding:24px 28px 26px; box-sizing:border-box;
	font-family:var(--nsj-font-body); font-size:14px; line-height:1.6;
	letter-spacing:normal;
	/* Centred, and still reachable when it is taller than the viewport.
	   `align-items:center` alone would centre it and then make the top
	   unscrollable once it overflowed; auto margins centre it while it fits
	   and collapse to 0 when it does not. */
	margin:auto;
	/* No nested scrollbar, ever: the overlay is the only scrolling box. */
	overflow:visible !important; max-height:none !important;
}
.nsj-dialog .nsj-form{ overflow:visible !important; max-height:none !important; }
.nsj-dialog::before{
	content:""; position:absolute; inset:-4px; z-index:-1; border-radius:14px;
	background:var(--nsj-dlg-panel); opacity:.96; filter:blur(5px);
}
/* One heading. The subject runs in on the same baseline as the title, as the
   contact dialog does — not a second grey line under it. */
.nsj-dialog .nsj-dlg-h{
	display:flex; align-items:baseline; flex-wrap:wrap; gap:0 10px; margin:0 0 16px;
	font-family:var(--nsj-font-head); font-weight:var(--nsj-weight-body);
	font-size:25px; line-height:1.2; letter-spacing:.01em;
	color:var(--nsj-dlg-ink);
}
.nsj-dialog .nsj-dlg-sub{
	font-family:var(--nsj-font-body); font-size:12.5px; font-weight:var(--nsj-weight-body);
	letter-spacing:0; opacity:.6; color:var(--nsj-dlg-ink);
}
.nsj-close{
	position:absolute; top:12px; right:14px; width:28px; height:28px; font-size:24px;
	line-height:1; color:var(--nsj-dlg-ink); cursor:pointer;
	background-color:transparent; border-width:0; border-radius:50%;
	transition:background .2s, color .2s;
}
.nsj-close:hover{ background:rgba(var(--nsj-dlg-ink-rgb),.12); }

/* ---- the form, in the contact form's language ---- */
.nsj-form label{
	display:block; margin-bottom:7px; font-size:12.5px;
	color:var(--nsj-dlg-ink); font-family:var(--nsj-font-body);
	font-weight:var(--nsj-weight-strong);
}
.nsj-req{ color:#c00; }
.nsj-form input[type=text], .nsj-form input[type=email], .nsj-form input[type=tel],
.nsj-form textarea, .nsj-form select{
	width:100%; padding:7px 10px; margin-top:4px;
	border-width:1px; border-style:solid;
	border-color:rgba(var(--nsj-dlg-ink-rgb),.35);
	border-radius:var(--nsj-fog-radius); box-sizing:border-box;
	font-family:var(--nsj-font-body); font-size:14px; font-weight:var(--nsj-weight-body);
	background:rgba(var(--nsj-dlg-ink-rgb),.12);
	color:var(--nsj-dlg-ink);
	transition:border-color .2s, box-shadow .2s, background .2s;
}
.nsj-form input:focus, .nsj-form textarea:focus, .nsj-form select:focus{
	outline:none;
	border-color:rgba(var(--nsj-dlg-ink-rgb),.78);
	background:rgba(var(--nsj-dlg-ink-rgb),.20);
	box-shadow:0 0 0 3px rgba(var(--nsj-dlg-ink-rgb),.18);
}
.nsj-form textarea{ resize:vertical; min-height:58px; overflow-x:hidden; overflow-y:auto; }
.nsj-counter{
	font-size:11px; color:var(--nsj-dlg-ink); opacity:.72;
	text-align:right; margin:-5px 0 9px;
}
/* Below the floor: dimmer, not red. It is not an error until they try to move
   on, and the browser says so then. */
.nsj-counter.nsj-under{ opacity:.45; }
.nsj-file{ margin:4px 0 9px; font-size:12.5px; }
.nsj-file-note{ opacity:.6; font-size:11px; margin-top:2px; }

/* ---- wizard: one step at a time, two-column field grid ---- */
.nsj-step{ display:none; }
.nsj-step.active{ display:block; }
.nsj-step-title{
	font-family:var(--nsj-font-head); font-size:19px; color:var(--nsj-dlg-ink);
	margin:0 0 10px;
}
.nsj-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 28px; align-items:start; }
.nsj-grid .nsj-full, .nsj-grid .nsj-q-long_text, .nsj-grid .nsj-q-free_text{ grid-column:1 / -1; }
.nsj-q{ min-width:0; }
.nsj-wiznav{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:12px; }
.nsj-back{
	background:transparent; color:var(--nsj-dlg-ink);
	border:1px solid rgba(var(--nsj-dlg-ink-rgb),.35);
	padding:12px 24px 8px; border-radius:var(--nsj-fog-radius); cursor:pointer;
	font-family:var(--nsj-font-head); font-size:15px; letter-spacing:.03em; transition:background .2s;
}
.nsj-back:hover{ background:rgba(var(--nsj-dlg-ink-rgb),.12); }
.nsj-back[disabled]{ opacity:0; pointer-events:none; }
.nsj-progress{ font-size:12px; color:var(--nsj-dlg-ink); opacity:.55; }

.nsj-quiz-intro{ font-size:13px; margin:0 0 10px; }
.nsj-opt{ display:block; font-weight:var(--nsj-weight-body) !important; font-size:13px !important; margin:0 0 5px !important; padding-left:24px; position:relative; cursor:pointer; }
.nsj-opt input{ position:absolute; left:0; top:2px; }
.nsj-scale{ display:flex; gap:12px; margin:4px 0 9px; }
.nsj-scale label{ font-weight:var(--nsj-weight-body) !important; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; margin:0 !important; }
.nsj-consent{
	position:relative; font-size:11px; color:var(--nsj-dlg-ink); line-height:1.4;
	margin:10px 0 10px; font-weight:var(--nsj-weight-body); padding-left:30px;
}
.nsj-consent input{
	position:absolute; left:2px; top:0; width:19px; height:19px; margin:0; cursor:pointer;
	-webkit-appearance:none; appearance:none;
	border-width:1px; border-style:solid;
	border-color:rgba(var(--nsj-dlg-ink-rgb),.45);
	border-radius:5px; background:rgba(var(--nsj-dlg-ink-rgb),.12);
	transition:background .2s, border-color .2s, box-shadow .2s;
}
.nsj-consent input:hover{ border-color:rgba(var(--nsj-dlg-ink-rgb),.78); background:rgba(var(--nsj-dlg-ink-rgb),.18); }
.nsj-consent input:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(var(--nsj-dlg-ink-rgb),.18); }
.nsj-consent input:checked{ background:var(--nsj-dlg-ink); border-color:var(--nsj-dlg-ink); }
.nsj-consent input:checked::after{
	content:""; position:absolute; left:6px; top:2px; width:5px; height:10px;
	border-style:solid; border-color:var(--nsj-dlg-panel); border-width:0 2px 2px 0;
	transform:rotate(43deg);
}
.nsj-consent a{ color:var(--nsj-dlg-ink); text-decoration:underline; }
.nsj-hp{ position:absolute; left:-9999px; }
.nsj-actions{ display:flex; justify-content:flex-end; margin-top:8px; }
.nsj-submit{
	background:var(--nsj-dlg-ink); color:var(--nsj-dlg-panel);
	border-width:0; border-style:solid; border-color:transparent;
	/* Special Elite sits optically high in its line box; the padding is biased
	   2px so the label is visually centred without changing the height. */
	padding:12px 28px 8px; border-radius:var(--nsj-fog-radius); cursor:pointer;
	font-family:var(--nsj-font-head); font-size:15px; letter-spacing:.03em;
	transition:filter .2s, box-shadow .2s;
}
.nsj-submit:hover{ filter:brightness(1.12); box-shadow:0 0 18px 3px rgba(var(--nsj-dlg-ink-rgb),.35); }
.nsj-submit:disabled{ opacity:.6; cursor:default; }
.nsj-msg{ margin:10px 0 0; font-size:13px; font-family:var(--nsj-font-body); }
.nsj-msg.err{ color:#a00; }
.nsj-msg.ok{ color:var(--nsj-dlg-ink); font-weight:var(--nsj-weight-strong); }

@media (max-width:640px){
	/* Below the fluid breakpoint the cards take a fixed share of the viewport
	   and the chevrons stay in the band, as they do at every other width. */
	.nsj-card{ flex:0 0 78vw; }
	.nsj-dialog{ padding:20px 18px 22px; }
	.nsj-grid{ grid-template-columns:1fr; }
}