/* ==========================================================================
   About
   ========================================================================== */

.nsd-abouthero { padding: 56px 0 64px; }
.nsd-abouthero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.nsd-abouthero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: center; }
.nsd-abouthero__pill { margin-bottom: 28px; }
.nsd-abouthero__h1 { margin: 0 0 26px; max-width: 14ch; }
.nsd-abouthero__lead { margin: 0 0 36px; max-width: 54ch; }
.nsd-abouthero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.nsd-portrait { position: relative; transform: rotate(-2deg); }
.nsd-portrait__img {
	position: relative; overflow: hidden; background: var(--surface);
	border-radius: var(--nsd-radius-panel); height: 420px;
}
@media (min-width: 900px) { .nsd-portrait__img { height: 500px; } }
.nsd-portrait__img { height: clamp(380px, 40vw, 560px); }
.nsd-portrait__badge {
	position: absolute; left: 16px; bottom: 16px; background: #FFFFFF; color: #101012;
	font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; pointer-events: none;
}

.nsd-aboutstmt { padding: 88px 0 80px; }

/* ---------- Principles accordion ---------- */
.nsd-principles { padding-top: 0; }
.nsd-principles__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.nsd-principles__intro { position: sticky; top: 120px; }
.nsd-principles__intro .nsd-h2 { margin: 0 0 16px; max-width: 12ch; }
.nsd-principles__intro p { font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 40ch; }

.nsd-acc { display: flex; flex-direction: column; gap: 10px; }
.nsd-acc__item { border-radius: var(--nsd-radius-card); border: 1px solid var(--line); transition: background .25s; }
.nsd-acc__item.is-open { background: var(--surface); }
.nsd-acc__btn {
	width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 20px;
	background: none; border: 0; padding: 24px 28px; cursor: pointer; color: var(--text);
}
.nsd-acc__t { font-family: 'Roboto', sans-serif; font-weight: 900; line-height: 1.15; letter-spacing: -0.025em; font-size: 20px; }
@media (min-width: 900px) { .nsd-acc__t { font-size: 24px; } }
.nsd-acc__t { font-size: clamp(20px, 2vw, 26px); }
.nsd-acc__plus {
	flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
	display: grid; place-items: center; font-size: 18px; transition: transform .3s;
}
.nsd-acc__item.is-open .nsd-acc__plus { transform: rotate(45deg); }

/* Height animates with the grid-rows trick, so long answers never clip.
   Without JavaScript every answer is simply open. */
.nsd-acc__panel { display: grid; grid-template-rows: 1fr; }
.nsd-acc__panel > div { overflow: hidden; min-height: 0; }
.nsd-acc__panel p { font-size: 16.5px; line-height: 1.7; color: var(--muted); max-width: 62ch; padding: 0 28px 26px; }
.js .nsd-acc__panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .4s ease, visibility 0s linear .4s; }
.js .nsd-acc__item.is-open .nsd-acc__panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }

/* ---------- Surefire partnership band ---------- */
.nsd-partner__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 56px; }
.nsd-partner__head .nsd-h2 { margin: 0; color: #F2F1F5; }
.nsd-partner__p { font-size: 17px; line-height: 1.7; color: #9A9AA6; margin: 0 0 24px; max-width: 52ch; }
.nsd-partner__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.nsd-partner__ph { border-radius: var(--nsd-radius-card); overflow: hidden; position: relative; height: 300px; background: var(--surface); }

@media (max-width: 960px) {
	.nsd-abouthero__grid, .nsd-principles__grid, .nsd-partner__head { grid-template-columns: 1fr; gap: 32px; }
	.nsd-aboutstmt { padding: 72px 0; }
	.nsd-principles__intro { position: static; }
	.nsd-partner__photos { grid-template-columns: 1fr; }
	.nsd-portrait { transform: rotate(-1deg); }
}