/* ==========================================================================
   NSDigital Consulting: global styles
   "Mist and ink". Light and dark. Brand kit colours only.

   Contents
     1. Fonts
     2. Tokens (light, dark)
     3. Base and utilities
     4. Type
     5. Buttons and pills
     6. Bands and media
     7. Top bar, header, dropdown, mobile menu
     8. Footer
     9. Quick navigation dialog (⌘K)
    10. Motion and reduced motion
    11. Responsive (960px, 560px)

   Two build rules apply throughout (see the build notes):
   - Every fluid clamp() is preceded by a static mobile/desktop fallback.
     LiteSpeed's CSS minifier has stripped clamp()/min()/max() declarations
     on this hosting before; the fallback keeps the type sized sensibly even
     if that happens. The clamp() line wins whenever it survives.
   - Reduced motion is honoured twice: the media query, and an .nsd-reduce
     class that theme-init.js sets, because the media query can be stripped.
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted, variable, latin) ---------- */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../assets/fonts/roboto-latin-variable.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../assets/fonts/opensans-latin-variable.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Tokens ---------- */
:root {
	--bg: #FFFFFF;
	--surface: #F5F5F6;
	--text: #101012;
	--muted: #6B6B73;
	--line: #E4E4E6;
	--accent: #9400AA;
	--on-accent: #FFFFFF;
	--dim: #6B6B73; /* the not-yet-revealed words: 5.3:1 on white, so the effect still passes WCAG AA */
	--band: #101012;
	--logo: none;

	/* Hero / header band */
	--hb: #F5F5F6;
	--ht: #101012;
	--hm: #6B6B73;
	--hl: #E4E4E6;
	--hc: #FFFFFF;
	--hc2: #F5F5F6;
	--hpill: #FFFFFF;
	--hbtn: #101012;
	--hbtnt: #FFFFFF;
	--hlogo: none;
	--hacc: #9400AA;

	--grain: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22 opacity=%22.14%22/%3E%3C/svg%3E');

	--nsd-radius-card: 20px;
	--nsd-radius-panel: 28px;
	--nsd-radius-input: 12px;
	--nsd-max: 1320px;
	--nsd-gutter: 56px;
	--nsd-section: 80px;

	color-scheme: light;
}

:root[data-theme="dark"] {
	--bg: #0B0B0D;
	--surface: #141419;
	--text: #F2F1F5;
	--muted: #9A9AA6;
	--line: #26262E;
	--accent: #C46BD6;
	--on-accent: #140016;
	--dim: #8A8A96; /* 5.6:1 on the dark background (was #55555E, 2.7:1) */
	--band: #141419;
	--logo: invert(1) hue-rotate(180deg);

	--hb: #0B0B0D;
	--ht: #F2F1F5;
	--hm: #9A9AA6;
	--hl: #26262E;
	--hc: #141419;
	--hc2: #26262E;
	--hpill: #141419;
	--hbtn: #F2F1F5;
	--hbtnt: #101012;
	--hlogo: invert(1) hue-rotate(180deg);
	--hacc: #C46BD6;

	color-scheme: dark;
}

/* ---------- 3. Base and utilities ---------- */
html { scroll-behavior: smooth; }

body.nsd-site {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	/* Explicit: Divi's customizer stylesheet sets body to 14px. */
	font-size: 16px;
	line-height: normal;
	-webkit-font-smoothing: antialiased;
	transition: background .3s, color .3s;
}

.nsd-site [hidden] { display: none !important; }
.nsd-site :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* Header, footer and dialogs carry their own reset so they look identical
   whether or not Divi's stylesheet is also loaded on the page. */
.nsd-chrome,
.nsd-native main {
	font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	line-height: normal;
	-webkit-font-smoothing: antialiased;
}
/* Resets. :where() removes the class from the specificity, so these sit at
   plain element level: they still beat a bare `a { }` or `h1 { }` rule from
   another stylesheet, but EVERY component class rule below beats them. (A
   `.nsd-native main a` reset would outrank `.nsd-btn { color: #fff }`.) */
:where(.nsd-chrome) a,
:where(.nsd-native) main a { color: inherit; text-decoration: none; }
:where(.nsd-chrome) button,
:where(.nsd-native) main button { font: inherit; }
:where(.nsd-chrome) :is(h1, h2, h3, p, ul),
:where(.nsd-native) main :is(h1, h2, h3, h4, p, ul, figure, blockquote) {
	margin: 0;
	padding: 0;
	color: inherit;
	text-transform: none;
}
:where(.nsd-chrome, .nsd-native main) ul { list-style: none; }
:where(.nsd-native) img { max-width: 100%; height: auto; }

.nsd-skip {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 200;
	background: var(--text);
	color: var(--bg);
	padding: 10px 16px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
}
.nsd-skip:focus { top: 12px; }

.nsd-sr-only {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.nsd-page { min-height: 100vh; background: var(--bg); color: var(--text); }

.nsd-wrap { max-width: var(--nsd-max); margin: 0 auto; padding: 0 var(--nsd-gutter); box-sizing: border-box; }
.nsd-pad { padding-left: var(--nsd-gutter); padding-right: var(--nsd-gutter); }

/* ---------- 4. Type ---------- */
.nsd-display,
.nsd-h1, .nsd-h2, .nsd-h3, .nsd-statement, .nsd-quote {
	font-family: 'Roboto', sans-serif;
}

/* Home / hub H1: 40px mobile, 88px desktop */
.nsd-h1 {
	font-weight: 900;
	letter-spacing: -0.045em;
	line-height: .98;
	font-size: 40px;
	text-wrap: balance;
	max-width: 13ch;
}
@media (min-width: 900px) { .nsd-h1 { font-size: 72px; } }
.nsd-h1 { font-size: clamp(40px, 6.2vw, 88px); }

/* Inner-page H1: 38px mobile, 72px desktop */
.nsd-h1--inner {
	line-height: 1;
	font-size: 38px;
	max-width: 15ch;
}
@media (min-width: 900px) { .nsd-h1--inner { font-size: 60px; } }
.nsd-h1--inner { font-size: clamp(38px, 5.2vw, 72px); }

.nsd-h2 {
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1.02;
	font-size: 30px;
	max-width: 14ch;
	text-wrap: balance;
}
@media (min-width: 900px) { .nsd-h2 { font-size: 46px; } }
.nsd-h2 { font-size: clamp(30px, 4vw, 52px); }

/* Section title in the 700 weight (What clients say) */
.nsd-h2--md {
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	font-size: 26px;
	max-width: none;
}
@media (min-width: 900px) { .nsd-h2--md { font-size: 32px; } }
.nsd-h2--md { font-size: clamp(26px, 3.2vw, 36px); }

.nsd-h3 {
	font-weight: 900;
	font-size: 22px;
	line-height: 1.15;
	letter-spacing: -0.025em;
}

/* Scroll-reveal statements and the large pull text */
.nsd-statement {
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.22;
	text-wrap: pretty;
	font-size: 24px;
}
@media (min-width: 900px) { .nsd-statement { font-size: 34px; } }
.nsd-statement { font-size: clamp(24px, 3vw, 40px); }

.nsd-lead { font-size: 18px; line-height: 1.65; color: var(--hm); }

.nsd-label { font-size: 13px; font-weight: 600; color: var(--muted); }

/* Scroll-reveal words. The text is plain and fully readable without
   JavaScript; nsd.js wraps each word and darkens it as you scroll. */
.nsd-reveal .nsd-w { color: var(--dim); transition: color .35s; }
.nsd-reveal .nsd-w.is-on { color: var(--text); }
.nsd-reveal.nsd-reveal--nodim .nsd-w { color: inherit; }

/* ---------- 5. Buttons and pills ---------- */
/* Hover colours depend on where the button sits: the hero band inverts to
   ink, dark bands invert to white, plain sections to the text colour. */
.nsd-native main,
.nsd-footer { --btn-hover-bg: var(--text); --btn-hover-fg: var(--bg); }
.nsd-hero { --btn-hover-bg: var(--ht); --btn-hover-fg: var(--hb); }
.nsd-band,
.nsd-footer { --btn-hover-bg: #FFFFFF; --btn-hover-fg: #101012; }

.nsd-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: normal;
	padding: 15px 26px;
	border-radius: 999px;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s, color .2s, border-color .2s;
}
.nsd-btn--primary { background: #9400AA; color: #FFFFFF; }
.nsd-btn--primary:hover { background: var(--btn-hover-bg); color: var(--btn-hover-fg); }

/* Secondary on the light/hero ground */
.nsd-btn--ghost { border: 1px solid var(--ht); color: var(--ht); padding: 14px 25px; background: none; }
.nsd-btn--ghost:hover { background: var(--ht); color: var(--hb); }

/* Secondary on a plain page section */
.nsd-btn--outline { border: 1px solid var(--text); color: var(--text); padding: 14px 25px; background: none; }
.nsd-btn--outline:hover { background: var(--text); color: var(--bg); }

/* Secondary on a dark band */
.nsd-btn--on-dark { border: 1px solid #55555E; color: #F2F1F5; padding: 14px 25px; background: none; }
.nsd-btn--on-dark:hover { background: #F2F1F5; color: #101012; }

.nsd-btn--sm { padding: 12px 20px; font-size: 14px; }

.nsd-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--hl);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--hm);
}
.nsd-pill--white { background: #FFFFFF; color: #101012; border-color: transparent; padding: 6px 12px; font-size: 12.5px; }
.nsd-pill--purple { background: #9400AA; color: #FFFFFF; border-color: transparent; padding: 6px 12px; font-size: 12.5px; font-weight: 600; }
.nsd-pill--ink { background: #101012; color: #FFFFFF; border-color: transparent; padding: 6px 12px; font-size: 12px; }
.nsd-pill--sm { padding: 5px 12px; }

.nsd-tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	border: 1px solid var(--line);
	color: var(--muted);
	padding: 4px 10px;
	border-radius: 999px;
}

/* ---------- 6. Bands and media ---------- */
.nsd-band { background-color: var(--band); background-image: var(--grain); color: #F2F1F5; }
.nsd-hero { background-color: var(--hb); background-image: var(--grain); color: var(--ht); }

.nsd-section { padding: var(--nsd-section) 0; }

/* Two-column "label | statement" and other 2-up splits */
.nsd-split { display: grid; gap: 48px; }

.nsd-media { position: relative; overflow: hidden; background: var(--surface); }
.nsd-media__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nsd-media--empty { background-color: var(--surface); background-image: var(--grain); }
.nsd-media__hint {
	position: absolute; inset: auto 12px 12px 12px;
	font-size: 11.5px; font-weight: 600; line-height: 1.4;
	color: var(--muted); background: var(--bg);
	border: 1px dashed var(--line); border-radius: 10px; padding: 8px 10px;
}
.nsd-grey { filter: grayscale(1); transition: filter .4s; }
.nsd-grey:hover { filter: grayscale(0); }

/* Fill a positioned parent */
.nsd-media--fill { position: absolute; inset: 0; }

/* ---------- 7. Top bar, header, dropdown, mobile menu ---------- */
.nsd-topbar { background-color: var(--hb); background-image: var(--grain); color: var(--ht); transition: background .3s, color .3s; }
.nsd-topbar__inner {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--hm);
	border-bottom: 1px solid var(--hl);
}
.nsd-topbar__group { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.nsd-topbar__group--end { gap: 20px; }
.nsd-topbar a:hover { color: var(--ht); }

/* Phones: one tidy row (phone left, theme toggle right). Social links live in the footer. */
@media (max-width: 640px) {
	.nsd-topbar__inner { align-items: center; gap: 12px; padding-top: 4px; padding-bottom: 4px; }
	.nsd-topbar__group { flex-wrap: nowrap; }
	.nsd-topbar__group a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 32px; }
	.nsd-topbar__group--end a { display: none; }
	.nsd-topbar .nsd-theme { min-height: 32px; white-space: nowrap; }
}

.nsd-theme {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	border-left: 1px solid var(--hl);
	padding: 0 0 0 20px;
	color: var(--hm);
	cursor: pointer;
	font-size: inherit;
	font-weight: inherit;
}
.nsd-theme:hover { color: var(--ht); }
.nsd-theme__track { width: 26px; height: 14px; border-radius: 999px; border: 1px solid var(--hl); position: relative; display: inline-block; }
.nsd-theme__knob { position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--ht); transition: left .2s; }
:root[data-theme="dark"] .nsd-theme__knob { left: 14px; }
.nsd-theme__word--light { display: none; }
:root[data-theme="dark"] .nsd-theme__word--dark { display: none; }
:root[data-theme="dark"] .nsd-theme__word--light { display: inline; }
html:not(.js) .nsd-theme { display: none; }

/* The header row shares the band colour at the top of the page, so it looks
   like part of the hero. Once it sticks (nsd.js adds .is-stuck) the row goes
   transparent and only the pill floats. */
.nsd-header {
	position: sticky;
	top: 0;
	z-index: 30;
	padding-top: 14px;
	padding-bottom: 14px;
	background-color: var(--hb);
	background-image: var(--grain);
	transition: background-color .25s;
}
.nsd-header.is-stuck { background-color: transparent; background-image: none; }
body.admin-bar .nsd-header { top: 32px; }
.nsd-sentinel { display: block; height: 1px; margin-bottom: -1px; }

.nsd-navpill {
	max-width: var(--nsd-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	background: var(--hpill);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid var(--hl);
	border-radius: 999px;
	padding: 10px 10px 10px 28px;
	height: 72px;
	box-sizing: border-box;
	transition: background .3s, border-color .3s;
}
.nsd-logo { display: block; flex: none; }
.nsd-logo img { display: block; height: 44px; width: auto; filter: var(--hlogo); }

.nsd-nav {
	display: flex;
	align-items: center;
	gap: 2px;
	height: 100%;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--hm);
	margin-left: auto;
}
.nsd-nav > a { padding: 8px 14px; }
.nsd-nav > a:hover,
.nsd-nav a[aria-current="page"],
.nsd-dd__btn[aria-current="page"] { color: var(--ht); }

.nsd-dd { position: relative; height: 100%; display: flex; align-items: center; }
.nsd-dd__btn {
	background: none; border: 0; cursor: pointer;
	padding: 8px 14px; display: flex; align-items: center; gap: 6px;
	color: var(--hm); font-size: inherit; font-weight: inherit;
}
.nsd-dd__btn:hover,
.nsd-dd.is-open .nsd-dd__btn { color: var(--ht); }
.nsd-dd__caret { font-size: 10px; transition: transform .2s; }
.nsd-dd.is-open .nsd-dd__caret { transform: rotate(180deg); }

/* Without JavaScript the menu opens on hover and keyboard focus. With it,
   nsd.js owns the state via .is-open (mouse hover, click, Escape), so CSS
   :hover/:focus-within must not also hold it open, or a click could never
   close it while the pointer or focus is still inside. */
.nsd-dd__menu {
	display: none;
	position: absolute;
	top: 100%;
	left: -40px;
	width: 340px;
	background: var(--hc);
	border: 1px solid var(--hl);
	border-radius: 18px;
	padding: 8px;
	animation: nsd-pop .16s ease-out;
}
html:not(.js) .nsd-dd:hover .nsd-dd__menu,
html:not(.js) .nsd-dd:focus-within .nsd-dd__menu,
.nsd-dd.is-open .nsd-dd__menu { display: block; }
.nsd-dd__item { display: block; padding: 14px 16px; border-radius: 12px; }
.nsd-dd__item:hover { background: var(--hc2); }
.nsd-dd__title { display: block; font-size: 14.5px; font-weight: 600; color: var(--ht); }
.nsd-dd__desc { display: block; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--hm); margin-top: 3px; }
.nsd-dd__all {
	display: block; margin-top: 6px; padding: 12px 16px 8px;
	border-top: 1px solid var(--hl); font-size: 13px; font-weight: 600; color: var(--hm);
}
.nsd-dd__all:hover { color: var(--ht); }

.nsd-actions { display: flex; align-items: center; gap: 8px; }
.nsd-kbtn {
	font-size: 12px; font-weight: 700; background: var(--hc2); border: 1px solid var(--hl);
	color: var(--hm); padding: 10px 12px; border-radius: 999px; cursor: pointer;
	transition: color .2s, border-color .2s;
}
.nsd-kbtn:hover { color: var(--ht); border-color: var(--ht); }
html:not(.js) .nsd-kbtn { display: none; }
.nsd-cta { background: var(--hbtn); color: var(--hbtnt); font-size: 14px; font-weight: 600; padding: 13px 20px; border-radius: 999px; }
.nsd-chrome .nsd-cta:hover { color: var(--hbtnt); opacity: .88; }
.nsd-burger {
	display: none; font-size: 13.5px; font-weight: 600; background: var(--hc2);
	border: 0; color: var(--ht); padding: 12px 14px; border-radius: 999px; cursor: pointer;
}

.nsd-mobile {
	display: none;
	position: sticky;
	top: 92px;
	z-index: 19;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	padding: 8px 20px 20px;
	flex-direction: column;
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
}
.nsd-mobile a { padding: 14px 0; border-bottom: 1px solid var(--line); }
.nsd-mobile .nsd-mobile__label {
	padding: 14px 0 6px; border: 0; font-size: 11px; font-weight: 600; letter-spacing: .2em;
	text-transform: uppercase; color: var(--muted);
}
.nsd-mobile .nsd-mobile__sub { padding: 10px 0 10px 12px; border: 0; font-weight: 400; color: var(--muted); }
.nsd-mobile .nsd-mobile__last { border-bottom: 0; border-top: 1px solid var(--line); margin-top: 6px; }
body.admin-bar .nsd-mobile { top: 124px; }
/* The pill has no room for a second button on a phone, so "Get a Quote"
   lives at the foot of the menu there (see the 560px rule). */
.nsd-mobile .nsd-mobile__cta {
	display: none; margin-top: 12px; padding: 15px 20px; border: 0; border-radius: 999px;
	background: var(--hbtn); color: var(--hbtnt); text-align: center; font-size: 15px;
}

/* ---------- 8. Footer ---------- */
.nsd-footer__inner { padding-top: 72px; padding-bottom: 40px; }
.nsd-footer__cta {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 48px;
	align-items: end;
	padding-bottom: 64px;
	border-bottom: 1px solid #26262E;
}
.nsd-footer__cta .nsd-h2 { margin: 0 0 28px; color: #F2F1F5; }
.nsd-footer__mail { text-align: right; }
.nsd-footer__mail p { font-size: 13px; font-weight: 600; color: #9A9AA6; margin: 0 0 10px; }
.nsd-footer__mail a {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	letter-spacing: -0.02em;
	border-bottom: 1px solid #F2F1F5;
	overflow-wrap: anywhere;
	font-size: 18px;
}
@media (min-width: 900px) { .nsd-footer__mail a { font-size: 24px; } }
.nsd-footer__mail a { font-size: clamp(18px, 2.2vw, 28px); }

.nsd-footer__logo { display: block; height: 40px; width: auto; filter: invert(1) hue-rotate(180deg); margin-top: 48px; }
.nsd-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
	padding: 32px 0 48px;
	font-size: 14.5px;
	color: #E4E4E6;
}
.nsd-footer__cols > div { display: flex; flex-direction: column; gap: 10px; }
.nsd-footer__cols a:hover { color: #FFFFFF; }
/* #9A9AA6 (the brand kit's dark-mode muted), not the design's #6B6B73: that
   is only 3.5:1 on the dark band, under the 4.5:1 WCAG AA needs for small text. */
.nsd-footer__h { font-size: 12px; font-weight: 600; color: #9A9AA6; margin-bottom: 6px; }
.nsd-footer__legal { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 32px; font-size: 13px; color: #9A9AA6; }
.nsd-footer__reg .nsd-nw { white-space: nowrap; }
.nsd-footer__reg a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nsd-footer__reg a:hover, .nsd-footer__reg a:focus-visible { color: #FFFFFF; }

/* ---------- 9. Quick navigation (⌘K) ---------- */
.nsd-k {
	position: fixed; inset: 0; z-index: 100;
	background: rgba(16, 16, 18, .5);
	display: flex; justify-content: center; align-items: flex-start;
	padding: 12vh 20px 20px;
}
.nsd-k__dialog {
	width: 100%; max-width: 620px; background: var(--bg); color: var(--text);
	border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
	animation: nsd-pop .18s ease-out;
}
.nsd-k__input {
	font-size: 17px; width: 100%; box-sizing: border-box; padding: 22px 24px;
	border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text);
	outline: none; font-family: inherit;
}
.nsd-k__input:focus-visible { border-bottom-color: var(--accent); outline: none; }
.nsd-k__list { max-height: 50vh; overflow: auto; padding: 8px; }
.nsd-k__item {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 12px 16px; border-radius: 10px; color: var(--text);
}
.nsd-k__item.is-active { background: var(--surface); }
.nsd-k__label { font-weight: 600; font-size: 15px; }
.nsd-k__kind { font-size: 12px; color: var(--muted); text-align: right; }
.nsd-k__empty { padding: 24px 16px; font-size: 15px; color: var(--muted); }
.nsd-k__keys {
	display: flex; gap: 20px; padding: 12px 24px; border-top: 1px solid var(--line);
	font-size: 12px; color: var(--muted); background: var(--surface);
}

/* ---------- 9b. Email chooser ---------- */
.nsd-mailpick {
	position: fixed; inset: 0; z-index: 110;
	background: rgba(16, 16, 18, .55);
	display: flex; justify-content: center; align-items: center; padding: 20px;
}
.nsd-mailpick[hidden] { display: none !important; }
.nsd-mailpick__dialog {
	position: relative; width: 100%; max-width: 460px; background: var(--bg); color: var(--text);
	border: 1px solid var(--line); border-radius: 20px; padding: 32px 28px 24px;
	animation: nsd-pop .18s ease-out;
}
.nsd-mailpick__x {
	position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
	border: 0; background: none; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer;
}
.nsd-mailpick__x:hover { color: var(--text); background: var(--surface); }
.nsd-mailpick__h { margin: 0 0 6px; font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 22px; letter-spacing: -0.02em; }
.nsd-mailpick__topic { margin: 0 0 20px; font-size: 14px; color: var(--muted); }
.nsd-mailpick__opts { display: flex; flex-direction: column; gap: 8px; }
.nsd-mailpick__opt {
	display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%; box-sizing: border-box;
	padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: transparent;
	color: var(--text); font: inherit; text-decoration: none; cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.nsd-mailpick__opt strong { font-size: 15px; }
.nsd-mailpick__opt span { font-size: 12.5px; color: var(--muted); }
.nsd-mailpick__opt:hover, .nsd-mailpick__opt:focus-visible { background: #9400AA; border-color: #9400AA; color: #FFFFFF; }
.nsd-mailpick__opt:hover span, .nsd-mailpick__opt:focus-visible span { color: rgba(255, 255, 255, .85); }
.nsd-mailpick__opt:focus-visible, .nsd-mailpick__x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Shared components (used by more than one template) ---------- */
/* ---------- Before / after ---------- */
.nsd-ba__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.nsd-ba__head .nsd-h2 { margin: 0; color: #F2F1F5; }
.nsd-ba__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.nsd-ba__tab {
	font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: 999px; cursor: pointer;
	border: 1px solid #26262E; background: transparent; color: #9A9AA6;
	transition: background .2s, color .2s;
}
.nsd-ba__tab:hover { color: #F2F1F5; }
.nsd-ba__tab.is-on { background: #F2F1F5; color: #101012; }

.nsd-ba__stage {
	--ba: 50%; --ba-r: 50%;
	position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden;
	border: 1px solid var(--line); background: var(--surface); user-select: none;
}
.nsd-ba__slide { position: absolute; inset: 0; }
.nsd-ba__layer { position: absolute; inset: 0; }
.nsd-ba__layer--before { clip-path: inset(0 var(--ba-r) 0 0); background-color: var(--surface); background-image: var(--grain); }
.nsd-ba__label {
	position: absolute; top: 16px; font-size: 12px; font-weight: 600; padding: 6px 12px;
	border-radius: 999px; pointer-events: none;
}
.nsd-ba__label--before { left: 16px; background: #101012; color: #FFFFFF; }
.nsd-ba__label--after { right: 16px; background: #FFFFFF; color: #101012; border: 1px solid var(--line); }
.nsd-ba__line { position: absolute; top: 0; bottom: 0; left: var(--ba); width: 2px; margin-left: -1px; background: #FFFFFF; pointer-events: none; }
.nsd-ba__handle {
	position: absolute; top: 50%; left: var(--ba); width: 56px; height: 56px; margin: -28px 0 0 -28px;
	border-radius: 50%; border: 2px solid #101012; background: #FFFFFF; color: #101012;
	font-size: 18px; font-weight: 700; cursor: ew-resize; touch-action: none; padding: 0;
}
.nsd-ba__foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 20px; font-size: 15.5px; line-height: 1.6; }
.nsd-ba__foot p { margin: 0; color: #9A9AA6; max-width: 60ch; }
.nsd-ba__foot strong { color: #F2F1F5; font-weight: 700; }
.nsd-ba__foot a { font-weight: 600; border-bottom: 1px solid #F2F1F5; align-self: flex-start; }


/* ---------- Pull quote (Home testimonials, case study quote) ---------- */
.nsd-quote {
	font-weight: 700; letter-spacing: -0.025em; line-height: 1.28; margin: 0 0 28px;
	max-width: 30ch; text-wrap: pretty; font-size: 24px;
}
@media (min-width: 900px) { .nsd-quote { font-size: 32px; } }
.nsd-quote { font-size: clamp(24px, 2.8vw, 36px); }

/* ---------- Label | statement split ---------- */
.nsd-split--label { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 48px; }
.nsd-split--label > .nsd-label { margin-top: 10px; }

/* ---------- Breadcrumb ---------- */
.nsd-crumb { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--hm); margin-bottom: 48px; flex-wrap: wrap; }
.nsd-crumb__back {
	display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--hl); border-radius: 999px;
	padding: 5px 12px; font-size: 13px; font-weight: 600; color: var(--hm); transition: border-color .2s, color .2s;
}
.nsd-crumb__back:hover { border-color: var(--ht); color: var(--ht); }


/* ---------- Included / done cards ---------- */
.nsd-inc {
	background: var(--surface); border-radius: var(--nsd-radius-card); padding: 30px;
	display: flex; flex-direction: column; gap: 12px; min-height: 220px; transition: transform .3s;
}
.nsd-inc:hover { transform: translateY(-4px); }
.nsd-inc__bar { width: 28px; height: 3px; background: var(--text); border-radius: 2px; display: block; }
.nsd-inc p { font-size: 15.5px; line-height: 1.65; color: var(--muted); }


/* ---------- 10. Motion ---------- */
@keyframes nsd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes nsd-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nsd-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* Reduced motion: no marquee, no tilt, no smooth scroll, near-instant
   transitions. Written twice (media query + .nsd-reduce) on purpose. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.nsd-site *, .nsd-site *::before, .nsd-site *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
	.nsd-marquee__track { animation: none !important; }
}
.nsd-reduce { scroll-behavior: auto; }
.nsd-reduce .nsd-site *, .nsd-reduce .nsd-site *::before, .nsd-reduce .nsd-site *::after {
	transition-duration: .01ms !important;
	animation-duration: .01ms !important;
	animation-iteration-count: 1 !important;
}
.nsd-reduce .nsd-marquee__track { animation: none !important; }

/* ---------- 11. Responsive ---------- */
@media (max-width: 960px) {
	:root { --nsd-gutter: 20px; --nsd-section: 72px; }

	.nsd-nav { display: none; }
	.js .nsd-burger { display: block; }
	.nsd-navpill { padding: 8px 8px 8px 16px; }
	.nsd-hide-md { display: none !important; }

	.js .nsd-mobile.is-open { display: flex; }
	html:not(.js) .nsd-mobile { display: flex; position: static; }

	.nsd-split { grid-template-columns: 1fr; gap: 32px; }

	.nsd-footer__cta { grid-template-columns: 1fr; gap: 32px; }
	.nsd-footer__cols { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 782px) {
	body.admin-bar .nsd-header { top: 46px; }
	body.admin-bar .nsd-mobile { top: 138px; }
}
@media (max-width: 560px) {
	.nsd-footer__cols { grid-template-columns: 1fr; }

	/* Logo, ⌘K, "Get a Quote" and "Menu" together are ~455px wide: too wide
	   for a 360px phone, and the overflow pushed the whole page sideways. */
	.nsd-kbtn, .nsd-cta { display: none; }
	.nsd-logo img { height: 30px; }
	.nsd-navpill { gap: 12px; }
	.nsd-mobile .nsd-mobile__cta { display: block; }
}

/* ---------- Case card (Home preview and the Case Studies hub) ---------- */
.nsd-cc { display: flex; flex-direction: column; gap: 14px; }
.nsd-cc__frame { position: relative; }
.nsd-cc__shot {
	border-radius: var(--nsd-radius-card); overflow: hidden; position: relative;
	background: var(--surface); height: 220px;
}
@media (min-width: 900px) { .nsd-cc__shot { height: 280px; } }
.nsd-cc__shot { height: clamp(200px, 20vw, 300px); }
.nsd-cc .nsd-pill { font-size: 12px; pointer-events: none; }
.nsd-cc__sector { position: absolute; top: 14px; left: 14px; }
.nsd-cc__dev { position: absolute; top: 14px; right: 14px; }
.nsd-cc__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.nsd-cc__name { font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 26px; line-height: 1.15; letter-spacing: -0.025em; }
.nsd-cc__read { font-size: 14px; font-weight: 600; white-space: nowrap; }
.nsd-cc__sum { font-size: 15.5px; line-height: 1.6; color: var(--muted); max-width: 56ch; }
.nsd-cc:hover .nsd-cc__shot { filter: grayscale(0); }

/* Inline external link inside body copy (Surefire) */
.nsd-ext { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nsd-ext:hover, .nsd-ext:focus-visible { text-decoration-thickness: 2px; }
.nsd-partner .nsd-ext { color: #F2F1F5; }

/* Cookie banner (Ultimate GDPR): Accept in the brand purple so it reads as the
   primary choice. The plugin gives both buttons one colour set, but writes
   Accept's colours inline WITHOUT !important (Change Settings has it), so these
   !important rules win on Accept only. White on #9400AA is about 7.5:1. */
#ct-ultimate-gdpr-cookie-accept {
	background-color: #9400AA !important; border-color: #9400AA !important; color: #FFFFFF !important;
	transition: background-color .2s, border-color .2s;
}
#ct-ultimate-gdpr-cookie-accept:hover { background-color: #7A008D !important; border-color: #7A008D !important; }
#ct-ultimate-gdpr-cookie-accept:focus-visible { outline: 2px solid #C46BD6; outline-offset: 3px; }
#ct-ultimate-gdpr-cookie-accept .ct-ultimate-gdpr-button-icon-left { color: #FFFFFF; }