/* ==========================================================================
 * NISSU editorial sections
 *
 * The design language is taken from the logo: six interlocking rings — people
 * joined in a circle — over an orange chevron. Two devices carry it:
 *
 *   1. The ring. Used as the section marker instead of icons, and drawn
 *      overlapping wherever the content is literally about connection. The
 *      overlap is the argument, not decoration.
 *   2. The cluster spectrum. Four of the logo's ring colours are bound to
 *      NISSU's four infrastructure types, so colour is an index the reader
 *      can learn once and use everywhere, not a palette.
 *
 * Everything is `ns-` prefixed so it never collides with the ported `rw-`
 * component sheet.
 * ======================================================================= */

:root {
	--ns-measure: 68ch;
	--ns-gap: clamp(26px, 3.2vw, 46px);
	--ns-band: clamp(44px, 5vw, 76px);
	--ns-display: "Libre Franklin", "Google Sans Flex", Georgia, serif;
	--ns-body: "Google Sans Flex", "Noto Sans", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
 * Shared shell
 * ----------------------------------------------------------------------- */

.ns {
	font-family: var(--ns-body);
	color: var(--nissu-text, #3d4855);
}
.ns__inner {
	max-width: var(--nissu-content-width, 1200px);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 40px);
}

/* Eyebrow: a short ring rule, then the label. The rule is a flattened ring. */
.ns__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--nissu-primary, #b06105);
}
.ns__eyebrow::before {
	content: "";
	width: 18px;
	height: 2px;
	flex: none;
	background: currentColor;
}

.ns__title {
	font-family: var(--ns-display);
	font-size: clamp(1.5rem, 2.5vw, 2.05rem);
	line-height: 1.18;
	letter-spacing: -0.014em;
	font-weight: 700;
	color: var(--nissu-heading, #14202b);
	margin: 0 0 18px;
	text-wrap: balance;
	max-width: 30ch;
}
.ns__lede {
	font-size: clamp(0.98rem, 1.2vw, 1.06rem);
	line-height: 1.6;
	max-width: 58ch;
	margin: 0;
	color: var(--nissu-text, #3d4855);
}

/* --------------------------------------------------------------------------
 * The motto
 *
 * Three plain columns. An earlier version used large outlined rings echoing the
 * logo; they read as decoration — or as images that had failed to load — so the
 * mark is now a short rule that just separates the columns and gets out of the
 * way. The words carry the section.
 * ----------------------------------------------------------------------- */

.ns-motto {
	background: var(--nissu-surface-alt, #f4f6f7);
	padding-block: var(--ns-band);
}
.ns-motto__quote {
	font-family: var(--ns-display);
	font-size: clamp(1.15rem, 2.1vw, 1.55rem);
	font-style: italic;
	line-height: 1.4;
	color: var(--nissu-heading, #14202b);
	max-width: 34ch;
	margin: 0 0 clamp(30px, 4vw, 44px);
	text-wrap: balance;
}
.ns-motto__ring-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 4vw, 52px);
}
.ns-motto__item { padding-top: 18px; border-top: 3px solid var(--nissu-orange, #f3941e); }
.ns-motto__word {
	font-family: var(--ns-display);
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--nissu-heading, #14202b);
	margin: 0 0 10px;
}
.ns-motto__text { font-size: 0.97rem; line-height: 1.62; margin: 0; }

@media (max-width: 760px) {
	.ns-motto__ring-row { grid-template-columns: 1fr; gap: 26px; }
}

/* --------------------------------------------------------------------------
 * Cluster spectrum — the four infrastructure types
 *
 * Each type owns one logo ring colour. The colour is the index: it reappears
 * on membership eligibility and, later, on the expert directory filter.
 * ----------------------------------------------------------------------- */

.ns-clusters { padding-block: var(--ns-band); background: var(--nissu-surface, #fff); }
.ns-clusters__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: clamp(16px, 2vw, 22px);
	margin-top: clamp(26px, 3vw, 36px);
}
.ns-cluster {
	background: var(--nissu-surface, #fff);
	border: 1px solid var(--nissu-border, #dde3e7);
	border-top: 3px solid var(--ns-c, #ccc);
	padding: 18px 20px 8px;
}
.ns-cluster:nth-child(1) { --ns-c: var(--nissu-cluster-physical, #e5162a); }
.ns-cluster:nth-child(2) { --ns-c: var(--nissu-cluster-digital, #2dbdef); }
.ns-cluster:nth-child(3) { --ns-c: var(--nissu-cluster-social, #c9a70b); }
.ns-cluster:nth-child(4) { --ns-c: var(--nissu-cluster-environmental, #27a752); }

.ns-cluster__name {
	font-family: var(--ns-display);
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--nissu-heading, #14202b);
	margin: 0 0 10px;
	letter-spacing: -0.01em;
}
.ns-cluster__list { margin: 0; padding: 0; list-style: none; }
.ns-cluster__list li {
	font-size: 0.92rem;
	line-height: 1.5;
	padding: 5px 0;
	border-bottom: 1px solid var(--nissu-border, #dde3e7);
	color: var(--nissu-text, #3d4855);
}
.ns-cluster__list li:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------------
 * Pillars — What we do
 *
 * Not a card grid: the four pillars are peers, not steps, so they read as an
 * editorial stack. The label column stays put while the prose scrolls, which
 * keeps the reader oriented in a long page.
 * ----------------------------------------------------------------------- */

.ns-pillars { padding-block: var(--ns-band); }
.ns-pillar {
	display: grid;
	grid-template-columns: minmax(180px, 0.32fr) 1fr;
	gap: var(--ns-gap);
	padding-block: clamp(34px, 4.5vw, 56px);
	border-top: 1px solid var(--nissu-border, #dde3e7);
}
.ns-pillar:first-of-type { border-top: 0; padding-top: 0; }

.ns-pillar__label { position: sticky; top: 96px; align-self: start; }
.ns-pillar__mark {
	width: 40px; height: 40px;
	border: 3px solid var(--ns-c, var(--nissu-primary, #b06105));
	border-radius: 50%;
	margin-bottom: 16px;
}
.ns-pillar:nth-of-type(1) { --ns-c: var(--nissu-cluster-physical, #e5162a); }
.ns-pillar:nth-of-type(2) { --ns-c: var(--nissu-cluster-digital, #2dbdef); }
.ns-pillar:nth-of-type(3) { --ns-c: var(--nissu-cluster-social, #c9a70b); }
.ns-pillar:nth-of-type(4) { --ns-c: var(--nissu-cluster-environmental, #27a752); }

.ns-pillar__name {
	font-family: var(--ns-display);
	font-size: clamp(1.2rem, 2vw, 1.55rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--nissu-heading, #14202b);
	margin: 0;
	text-wrap: balance;
}
.ns-pillar__body > p { margin: 0 0 1em; line-height: 1.68; max-width: var(--ns-measure); }
.ns-pillar__body > p:last-child { margin-bottom: 0; }
.ns-pillar__body em { color: var(--nissu-heading, #14202b); }

@media (max-width: 820px) {
	.ns-pillar { grid-template-columns: 1fr; gap: 18px; }
	.ns-pillar__label { position: static; }
	.ns-pillar__mark { width: 32px; height: 32px; margin-bottom: 12px; }
}

/* --------------------------------------------------------------------------
 * Proverb — the two sayings in the source material carry real weight, so they
 * get real typographic weight, marked with the ring rather than a quote glyph.
 * ----------------------------------------------------------------------- */

.ns-proverb {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(18px, 3vw, 30px);
	align-items: start;
	padding: clamp(26px, 4vw, 40px) 0;
	margin-block: clamp(20px, 3vw, 34px);
	border-top: 2px solid var(--nissu-heading, #14202b);
	border-bottom: 1px solid var(--nissu-border, #dde3e7);
}
.ns-proverb__ring {
	position: relative;
	width: 66px; height: 38px;   /* holds the pair, not one ring */
	flex: none;
}
.ns-proverb__ring::before,
.ns-proverb__ring::after {
	content: "";
	position: absolute;
	top: 0;
	width: 38px; height: 38px;
	border-radius: 50%;
	border: 2.5px solid;
}
.ns-proverb__ring::before { left: 0;    border-color: var(--nissu-orange, #f3941e); }
.ns-proverb__ring::after  { left: 24px; border-color: var(--nissu-heading, #14202b); opacity: 0.3; }
.ns-proverb__text {
	font-family: var(--ns-display);
	font-size: clamp(1.15rem, 2.3vw, 1.7rem);
	font-style: italic;
	line-height: 1.35;
	color: var(--nissu-heading, #14202b);
	margin: 0;
	max-width: 34ch;
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
 * Theory → Research → Application
 *
 * The source calls this a continuous cycle, so it is drawn as one. The arcs
 * are a real diagram, not an illustration: each segment feeds the next.
 * ----------------------------------------------------------------------- */

.ns-tra {
	background: var(--nissu-heading, #14202b);
	color: #fff;
	padding-block: var(--ns-band);
}
.ns-tra .ns__title, .ns-tra .ns-tra__name { color: #fff; }
.ns-tra .ns__eyebrow { color: var(--nissu-orange, #f3941e); }
.ns-tra__layout {
	display: grid;
	grid-template-columns: minmax(260px, 0.9fr) 1fr;
	gap: clamp(30px, 5vw, 66px);
	align-items: center;
	margin-top: clamp(28px, 4vw, 44px);
}
.ns-tra__dial { width: 100%; height: auto; }
.ns-tra__dial .seg { fill: none; stroke-width: 14; stroke-linecap: round; }
.ns-tra__dial .lbl {
	font-family: var(--ns-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	fill: #fff;
}
.ns-tra__dial .hub {
	font-family: var(--ns-display);
	font-size: 15px;
	font-weight: 700;
	fill: rgba(255,255,255,0.55);
}
.ns-tra__step { padding-block: 16px; border-top: 1px solid rgba(255,255,255,0.16); }
.ns-tra__step:first-child { border-top: 0; padding-top: 0; }
.ns-tra__name {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--ns-display);
	font-size: 1.1rem; font-weight: 700; margin: 0 0 6px;
}
.ns-tra__name::before {
	content: ""; width: 12px; height: 12px; border-radius: 50%;
	background: var(--ns-c); flex: none;
}
.ns-tra__step:nth-child(1) { --ns-c: var(--nissu-cluster-physical, #e5162a); }
.ns-tra__step:nth-child(2) { --ns-c: var(--nissu-cluster-digital, #2dbdef); }
.ns-tra__step:nth-child(3) { --ns-c: var(--nissu-orange, #f3941e); }
.ns-tra__step p { margin: 0; line-height: 1.62; color: rgba(255,255,255,0.78); font-size: 0.96rem; }
.ns-tra__close {
	margin: clamp(24px, 3vw, 36px) 0 0;
	font-family: var(--ns-display);
	font-style: italic;
	font-size: 1.05rem;
	color: rgba(255,255,255,0.7);
	max-width: 56ch;
}
@media (max-width: 860px) { .ns-tra__layout { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
 * Benefits — why join
 * ----------------------------------------------------------------------- */

.ns-benefits { padding-block: var(--ns-band); background: var(--nissu-surface-alt, #f4f6f7); }
.ns-benefits__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
	gap: clamp(16px, 2vw, 22px);
	margin-top: clamp(26px, 3vw, 36px);
}
/* Bordered panels. An earlier version marked each with a pair of overlapping
 * rings; it read as playful rather than professional, so the panel edge and a
 * short accent rule do the separating instead. */
.ns-benefit {
	background: var(--nissu-surface, #fff);
	border: 1px solid var(--nissu-border, #dde3e7);
	padding: 22px 22px 24px;
}
.ns-benefit::before {
	content: "";
	display: block;
	width: 26px;
	height: 3px;
	background: var(--nissu-orange, #f3941e);
	margin-bottom: 14px;
}

.ns-benefit__name {
	font-family: var(--ns-display);
	font-size: 1.08rem; font-weight: 700;
	color: var(--nissu-heading, #14202b);
	margin: 0 0 8px; letter-spacing: -0.01em;
}
.ns-benefit p { margin: 0; font-size: 0.95rem; line-height: 1.62; }

/* --------------------------------------------------------------------------
 * Membership tiers
 *
 * Four of the six categories form a real progression, so the ladder escalates:
 * the marker fills in and the rule thickens as status rises. Corporate and
 * Emeritus sit apart, because they are routes in, not rungs.
 * ----------------------------------------------------------------------- */

.ns-tiers { padding-block: var(--ns-band); background: var(--nissu-surface-alt, #f4f6f7); }
.ns-ladder { margin-top: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; }
.ns-tier {
	display: grid;
	grid-template-columns: 30px minmax(150px, 0.3fr) 1fr;
	gap: clamp(14px, 2.4vw, 28px);
	align-items: start;
	padding-block: clamp(20px, 2.6vw, 30px);
	border-bottom: 1px solid var(--nissu-border, #dde3e7);
}
.ns-tier__pip {
	width: 20px; height: 20px; margin-top: 3px;
	border-radius: 50%;
	border: 3px solid var(--nissu-primary, #b06105);
	background: transparent;
}
.ns-tier--2 .ns-tier__pip { background: color-mix(in srgb, var(--nissu-orange, #f3941e) 40%, transparent); }
.ns-tier--3 .ns-tier__pip { background: var(--nissu-orange, #f3941e); }
.ns-tier--4 .ns-tier__pip { background: var(--nissu-heading, #14202b); border-color: var(--nissu-heading, #14202b); }

.ns-tier__name {
	font-family: var(--ns-display);
	font-size: 1.06rem; font-weight: 700;
	color: var(--nissu-heading, #14202b);
	margin: 0; letter-spacing: -0.01em;
}
.ns-tier__flag {
	display: inline-block; margin-top: 7px;
	font-size: 0.72rem; font-weight: 600;
	letter-spacing: 0.09em; text-transform: uppercase;
	color: var(--nissu-primary, #b06105);
}
.ns-tier__body { margin: 0; font-size: 0.95rem; line-height: 1.62; max-width: 62ch; }

.ns-tiers__aside {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(20px, 3vw, 34px);
	margin-top: clamp(28px, 4vw, 40px);
	padding-top: clamp(24px, 3vw, 34px);
	border-top: 2px solid var(--nissu-heading, #14202b);
}
@media (max-width: 760px) {
	.ns-tier { grid-template-columns: 22px 1fr; }
	.ns-tier__body { grid-column: 2; }
}

/* --------------------------------------------------------------------------
 * Join steps — the one genuinely sequential thing on the site, so the only
 * place a number is honest.
 * ----------------------------------------------------------------------- */

.ns-steps { padding-block: var(--ns-band); }
.ns-steps__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: clamp(22px, 3vw, 34px);
	margin-top: clamp(30px, 4vw, 46px);
	counter-reset: ns-step;
}
.ns-step { position: relative; padding-top: 46px; }
.ns-step::before {
	counter-increment: ns-step;
	content: counter(ns-step);
	position: absolute; top: 0; left: 0;
	width: 34px; height: 34px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--nissu-heading, #14202b);
	color: #fff;
	font-size: 0.9rem; font-weight: 700;
	font-variant-numeric: tabular-nums;
}
/* the connecting rule between steps — the process is continuous */
.ns-step::after {
	content: "";
	position: absolute; top: 17px; left: 42px; right: -18px;
	height: 1px;
	background: var(--nissu-border, #dde3e7);
}
.ns-step:last-child::after { display: none; }
@media (max-width: 700px) { .ns-step::after { display: none; } }

.ns-step__name {
	font-family: var(--ns-display);
	font-size: 1.02rem; font-weight: 700;
	color: var(--nissu-heading, #14202b);
	margin: 0 0 8px;
}
.ns-step p { margin: 0; font-size: 0.94rem; line-height: 1.6; }
.ns-step a { color: var(--nissu-primary, #b06105); }

/* --------------------------------------------------------------------------
 * Split statement — used on Home under the hero
 * ----------------------------------------------------------------------- */

.ns-statement { padding-block: var(--ns-band); }
.ns-statement__grid {
	display: grid;
	grid-template-columns: 1fr minmax(300px, 0.85fr);
	gap: var(--ns-gap);
	align-items: start;
}
.ns-statement__body > p { margin: 0 0 1em; line-height: 1.7; max-width: var(--ns-measure); }
.ns-statement__body > p:last-child { margin-bottom: 0; }
.ns-statement__facts { display: flex; flex-direction: column; gap: 2px; }
.ns-fact { padding: 16px 0; border-top: 1px solid var(--nissu-border, #dde3e7); }
.ns-fact:first-child { border-top: 3px solid var(--nissu-heading, #14202b); }
.ns-fact__k {
	font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--nissu-primary, #b06105);
	margin: 0 0 5px;
}
.ns-fact__v {
	font-family: var(--ns-display);
	font-size: 1.02rem; line-height: 1.45; margin: 0;
	color: var(--nissu-heading, #14202b);
}
@media (max-width: 820px) { .ns-statement__grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
	.ns * { animation: none !important; transition: none !important; }
}