/* ==========================================================
   SitePlace modern design system
   Loaded on every page (after the legacy theme on old pages).
   Everything is namespaced with .sp- so it cannot clash with
   the legacy Bootstrap theme.
   ========================================================== */

:root {
	--sp-ink: #0a0f1f;
	--sp-ink-2: #11182e;
	--sp-ink-3: #1a2340;
	--sp-line: rgba(255, 255, 255, .10);
	--sp-line-light: #e6e9f2;
	--sp-text: #1c2438;
	--sp-muted: #5d6781;
	--sp-muted-dark: #a3adc8;
	--sp-bg: #ffffff;
	--sp-bg-soft: #f5f7fc;
	--sp-blue: #2f6bff;
	--sp-violet: #7c4dff;
	--sp-cyan: #19d3f3;
	--sp-orange: #ff8a1f;
	--sp-green: #22d39a;
	--sp-grad: linear-gradient(115deg, #2f6bff 0%, #7c4dff 55%, #19d3f3 120%);
	--sp-grad-warm: linear-gradient(115deg, #ff8a1f, #ff4d7c);
	--sp-radius: 16px;
	--sp-font: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--sp-font-display: 'Space Grotesk', 'Inter', -apple-system, 'Segoe UI', sans-serif;
	--sp-header-h: 72px;
}

html { scroll-behavior: smooth; }
body.sp-body {
	font-family: var(--sp-font);
	color: var(--sp-text);
	background: var(--sp-bg);
	-webkit-font-smoothing: antialiased;
	margin: 0;
}
.sp-body h1, .sp-body h2, .sp-body h3, .sp-body h4, .sp-body h5, .sp-body h6 {
	font-family: var(--sp-font-display);
	letter-spacing: -.02em;
	color: inherit;
	text-transform: none;
}
.sp-body a { transition: color .2s, background .2s, border-color .2s, transform .2s; }
.sp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.sp-skip { position: absolute; left: -999px; top: 0; background: #fff; color: #000; padding: 10px 16px; z-index: 999; }
.sp-skip:focus { left: 8px; top: 8px; }

/* ---------- header ---------- */
.sp-header {
	position: sticky; top: 0; z-index: 100; height: var(--sp-header-h);
	background: rgba(255, 255, 255, .88);
	backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
	border-bottom: 1px solid var(--sp-line-light);
}
.sp-header .sp-wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.sp-logo img { height: 40px; width: auto; display: block; }
.sp-nav { display: flex; align-items: center; gap: 6px; }
.sp-nav a {
	color: var(--sp-text); text-decoration: none; font-weight: 500; font-size: .95rem;
	padding: 9px 14px; border-radius: 999px;
}
.sp-nav a:hover { background: var(--sp-bg-soft); color: var(--sp-blue); }
.sp-nav a.is-active { color: var(--sp-blue); background: #edf2ff; }
.sp-nav a.sp-nav-dms {
	color: #fff; background: var(--sp-grad); font-weight: 600; margin: 0 6px;
	box-shadow: 0 6px 18px -6px rgba(124, 77, 255, .7);
}
.sp-nav a.sp-nav-dms:hover { color: #fff; transform: translateY(-1px); }
.sp-nav a.sp-nav-dms .sp-new {
	font-size: .62rem; background: #fff; color: var(--sp-violet); padding: 2px 6px; border-radius: 99px;
	margin-left: 6px; letter-spacing: .05em; text-transform: uppercase; vertical-align: 1px;
}
.sp-nav a.sp-nav-cta { background: var(--sp-ink); color: #fff; }
.sp-nav a.sp-nav-cta:hover { background: var(--sp-ink-3); color: #fff; }
.sp-burger { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
.sp-burger span, .sp-burger span::before, .sp-burger span::after {
	display: block; height: 2px; width: 24px; background: var(--sp-ink); border-radius: 2px; position: relative; content: ''; transition: .25s;
}
.sp-burger span::before { position: absolute; top: -7px; }
.sp-burger span::after { position: absolute; top: 7px; }
.sp-burger[aria-expanded="true"] span { background: transparent; }
.sp-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.sp-burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 900px) {
	.sp-burger { display: block; }
	.sp-nav {
		position: absolute; top: var(--sp-header-h); left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch;
		padding: 12px 24px 20px; border-bottom: 1px solid var(--sp-line-light); box-shadow: 0 20px 40px -20px rgba(10, 15, 31, .25);
		display: none;
	}
	.sp-nav.is-open { display: flex; }
	.sp-nav a { padding: 14px 16px; border-radius: 12px; }
	.sp-nav a.sp-nav-dms { margin: 6px 0; text-align: center; }
}

/* ---------- buttons ---------- */
.sp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--sp-font); font-weight: 600; font-size: .98rem; text-decoration: none !important;
	padding: 14px 26px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; line-height: 1.1;
}
.sp-btn:hover { transform: translateY(-2px); }
.sp-btn-primary { background: var(--sp-grad); color: #fff !important; box-shadow: 0 10px 30px -10px rgba(124, 77, 255, .8); }
.sp-btn-warm { background: var(--sp-grad-warm); color: #fff !important; box-shadow: 0 10px 30px -10px rgba(255, 90, 80, .8); }
.sp-btn-dark { background: var(--sp-ink); color: #fff !important; }
.sp-btn-ghost { border-color: rgba(255, 255, 255, .35); color: #fff !important; background: rgba(255, 255, 255, .04); }
.sp-btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.sp-btn-outline { border-color: var(--sp-line-light); color: var(--sp-text) !important; background: #fff; }
.sp-btn-outline:hover { border-color: var(--sp-blue); color: var(--sp-blue) !important; }
.sp-btn-sm { padding: 10px 18px; font-size: .88rem; }

/* ---------- sections ---------- */
.sp-section { padding: 96px 0; position: relative; }
.sp-section.is-soft { background: var(--sp-bg-soft); }
.sp-section.is-dark { background: var(--sp-ink); color: #e9edfb; }
.sp-section.is-tight { padding: 64px 0; }
.sp-eyebrow {
	display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--sp-blue); margin-bottom: 14px;
}
.is-dark .sp-eyebrow { color: var(--sp-cyan); }
.sp-eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.sp-h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.1; margin: 0 0 16px; }
.sp-lead { font-size: 1.15rem; color: var(--sp-muted); max-width: 640px; line-height: 1.65; margin: 0; }
.is-dark .sp-lead { color: var(--sp-muted-dark); }
.sp-section-head { margin-bottom: 56px; }
.sp-section-head.is-center { text-align: center; }
.sp-section-head.is-center .sp-lead { margin: 0 auto; }
.sp-grad-text { background: var(--sp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-grad-text-warm { background: var(--sp-grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- hero (dark, glowing) ---------- */
.sp-hero { background: var(--sp-ink); color: #fff; padding: 110px 0 90px; position: relative; overflow: hidden; }
.sp-hero::before, .sp-hero::after { content: ''; position: absolute; border-radius: 50%; filter: blur(110px); opacity: .55; pointer-events: none; }
.sp-hero::before { width: 520px; height: 520px; background: #2f6bff; top: -180px; left: -120px; }
.sp-hero::after { width: 480px; height: 480px; background: #7c4dff; bottom: -220px; right: -80px; opacity: .45; }
.sp-hero-grid {
	position: absolute; inset: 0; pointer-events: none;
	background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
}
.sp-hero .sp-wrap { position: relative; z-index: 2; }
.sp-hero h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); font-weight: 700; line-height: 1.03; margin: 0 0 22px; color: #fff; }
.sp-hero p.sp-sub { font-size: 1.2rem; color: var(--sp-muted-dark); max-width: 600px; line-height: 1.6; margin: 0 0 34px; }
.sp-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.sp-pill {
	display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px; border-radius: 999px; font-size: .85rem; font-weight: 500;
	background: rgba(255, 255, 255, .07); border: 1px solid var(--sp-line); color: #dfe5fb; margin-bottom: 26px; text-decoration: none;
}
.sp-pill b { background: var(--sp-grad); color: #fff; padding: 3px 10px; border-radius: 99px; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.sp-pill:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* stat strip */
.sp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--sp-line); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); overflow: hidden; margin-top: 64px; }
.sp-stat { background: rgba(10, 15, 31, .85); padding: 26px 22px; text-align: center; }
.sp-stat strong { display: block; font-family: var(--sp-font-display); font-size: 2.2rem; line-height: 1; margin-bottom: 6px; }
.sp-stat span { font-size: .85rem; color: var(--sp-muted-dark); }
@media (max-width: 700px) { .sp-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- cards ---------- */
.sp-grid { display: grid; gap: 22px; }
.sp-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.sp-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.sp-grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .sp-grid.c3, .sp-grid.c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sp-grid.c2, .sp-grid.c3, .sp-grid.c4 { grid-template-columns: 1fr; } }

.sp-card {
	background: #fff; border: 1px solid var(--sp-line-light); border-radius: var(--sp-radius); padding: 30px;
	transition: transform .25s, box-shadow .25s, border-color .25s; position: relative;
}
.sp-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -24px rgba(31, 60, 140, .35); border-color: #cfd8f5; }
.sp-card h3, .sp-card h4 { font-size: 1.2rem; margin: 18px 0 8px; font-weight: 600; }
.sp-card p { color: var(--sp-muted); margin: 0; line-height: 1.6; font-size: .96rem; }
.sp-card a.sp-more { display: inline-block; margin-top: 16px; font-weight: 600; font-size: .9rem; color: var(--sp-blue); text-decoration: none; }
.sp-card a.sp-more:hover { text-decoration: underline; }
.sp-icon {
	width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; color: #fff; background: var(--sp-grad);
	box-shadow: 0 10px 24px -10px rgba(47, 107, 255, .8);
}
.sp-icon.warm { background: var(--sp-grad-warm); box-shadow: 0 10px 24px -10px rgba(255, 90, 80, .8); }
.sp-icon.green { background: linear-gradient(115deg, #0fb78a, #22d39a); box-shadow: 0 10px 24px -10px rgba(15, 183, 138, .8); }
.sp-icon.cyan { background: linear-gradient(115deg, #0a9bd6, #19d3f3); box-shadow: 0 10px 24px -10px rgba(10, 155, 214, .8); }

.is-dark .sp-card { background: rgba(255, 255, 255, .04); border-color: var(--sp-line); }
.is-dark .sp-card:hover { border-color: rgba(124, 77, 255, .6); box-shadow: 0 24px 50px -24px rgba(124, 77, 255, .6); }
.is-dark .sp-card p { color: var(--sp-muted-dark); }
.is-dark .sp-card h3, .is-dark .sp-card h4 { color: #fff; }

/* ---------- split feature highlight (home -> DMS) ---------- */
.sp-feature-band { background: var(--sp-ink); color: #fff; border-radius: 28px; padding: 56px; position: relative; overflow: hidden; }
.sp-feature-band::before { content: ''; position: absolute; width: 420px; height: 420px; right: -100px; top: -140px; background: #7c4dff; filter: blur(110px); opacity: .5; }
.sp-feature-band > * { position: relative; }
.sp-checks { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 10px; }
.sp-checks li { padding-left: 30px; position: relative; color: #d6dcf2; }
.sp-checks li::before {
	content: '\f00c'; font-family: FontAwesome; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%;
	background: rgba(34, 211, 154, .18); color: var(--sp-green); font-size: .68rem; display: grid; place-items: center;
}
.sp-checks.on-light li { color: var(--sp-text); }
@media (max-width: 700px) { .sp-feature-band { padding: 32px 22px; } }

/* ---------- process / steps ---------- */
.sp-step-n { font-family: var(--sp-font-display); font-size: .85rem; font-weight: 700; color: var(--sp-blue); letter-spacing: .1em; }

/* ---------- quotes ---------- */
.sp-quote { font-size: 1rem; line-height: 1.65; color: #d6dcf2; margin: 0 0 18px; }
.sp-quote-by strong { display: block; color: #fff; font-size: .92rem; }
.sp-quote-by span { color: var(--sp-muted-dark); font-size: .82rem; }
.sp-stars { color: #ffc24a; letter-spacing: 2px; font-size: .9rem; margin-bottom: 14px; }

/* ---------- CTA ---------- */
.sp-cta { background: var(--sp-grad); color: #fff; border-radius: 28px; padding: 64px 40px; text-align: center; position: relative; overflow: hidden; }
.sp-cta h2 { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: 0 0 12px; }
.sp-cta p { color: rgba(255, 255, 255, .85); margin: 0 auto 28px; max-width: 560px; font-size: 1.08rem; }
.sp-cta .sp-btn-light { background: #fff; color: var(--sp-ink) !important; }

/* ---------- footer ---------- */
.sp-footer { background: var(--sp-ink); color: var(--sp-muted-dark); padding: 72px 0 0; }
.sp-footer h5 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 18px; font-family: var(--sp-font); }
.sp-footer a { color: var(--sp-muted-dark); text-decoration: none; }
.sp-footer a:hover { color: #fff; }
.sp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .94rem; }
.sp-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; }
@media (max-width: 900px) { .sp-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sp-footer-grid { grid-template-columns: 1fr; } }
.sp-footer-logo { background: #fff; display: inline-block; padding: 8px 14px; border-radius: 12px; margin-bottom: 18px; }
.sp-footer-logo img { height: 32px; display: block; }
.sp-footer-bar { border-top: 1px solid var(--sp-line); margin-top: 56px; padding: 22px 0; font-size: .85rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sp-footer-form input, .sp-footer-form textarea {
	width: 100%; background: rgba(255, 255, 255, .06); border: 1px solid var(--sp-line); border-radius: 10px; padding: 11px 14px; color: #fff; margin-bottom: 10px; font-family: var(--sp-font);
}
.sp-footer-form input:focus, .sp-footer-form textarea:focus { outline: none; border-color: var(--sp-cyan); }
.sp-footer-form ::placeholder { color: #7d88a8; }

/* ---------- page head (inner pages) ---------- */
.sp-pagehead { background: var(--sp-ink); color: #fff; padding: 84px 0 70px; position: relative; overflow: hidden; }
.sp-pagehead::before { content: ''; position: absolute; width: 460px; height: 460px; border-radius: 50%; background: #2f6bff; filter: blur(120px); opacity: .45; top: -220px; left: -100px; }
.sp-pagehead::after { content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: #7c4dff; filter: blur(120px); opacity: .4; bottom: -220px; right: -60px; }
.sp-pagehead .sp-wrap { position: relative; z-index: 2; }
.sp-pagehead h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; margin: 0 0 14px; color: #fff; }
.sp-pagehead p { color: var(--sp-muted-dark); font-size: 1.12rem; max-width: 640px; margin: 0; line-height: 1.6; }
.sp-crumbs { font-size: .85rem; margin-bottom: 18px; color: var(--sp-muted-dark); }
.sp-crumbs a { color: var(--sp-cyan); text-decoration: none; }

/* ---------- our work ---------- */
.sp-filter { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.sp-filter button {
	background: #fff; border: 1px solid var(--sp-line-light); border-radius: 99px; padding: 9px 18px; font-weight: 600; font-size: .88rem; cursor: pointer; color: var(--sp-muted); font-family: var(--sp-font);
}
.sp-filter button:hover { border-color: var(--sp-blue); color: var(--sp-blue); }
.sp-filter button.is-active { background: var(--sp-ink); color: #fff; border-color: var(--sp-ink); }
.sp-work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 1050px) { .sp-work { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .sp-work { grid-template-columns: 1fr; } }
.sp-work-card {
	background: #fff; border: 1px solid var(--sp-line-light); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column;
	transition: transform .3s, box-shadow .3s;
}
.sp-work-card:hover { transform: translateY(-6px); box-shadow: 0 36px 70px -34px rgba(31, 60, 140, .45); }
.sp-work-card.is-hidden { display: none; }
.sp-work-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sp-ink); }
.sp-work-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .6s; }
.sp-work-card:hover .sp-work-media img { transform: scale(1.05); }
.sp-work-art { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.sp-work-art i { font-size: 4rem; opacity: .9; text-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
.sp-work-art small { position: absolute; bottom: 16px; left: 18px; font-size: .8rem; opacity: .85; letter-spacing: .04em; }
.sp-work-tag {
	position: absolute; top: 16px; left: 16px; z-index: 2; background: rgba(10, 15, 31, .72); backdrop-filter: blur(8px); color: #fff; font-size: .72rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px;
}
.sp-work-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.sp-work-body h3 { font-size: 1.3rem; margin: 0 0 10px; font-weight: 700; }
.sp-work-body p { color: var(--sp-muted); line-height: 1.65; margin: 0 0 18px; font-size: .98rem; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 22px; padding: 0; list-style: none; }
.sp-chips li { background: var(--sp-bg-soft); border: 1px solid var(--sp-line-light); color: #3b4666; font-size: .76rem; font-weight: 500; padding: 5px 11px; border-radius: 99px; }
.sp-work-links { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* project detail */
.sp-detail { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
@media (max-width: 960px) { .sp-detail { grid-template-columns: 1fr; } }
.sp-detail h2 { font-size: 1.5rem; margin: 36px 0 14px; }
.sp-detail p { line-height: 1.75; color: var(--sp-muted); }
.sp-detail ul.sp-checks li { color: var(--sp-text); }
.sp-side { background: var(--sp-bg-soft); border: 1px solid var(--sp-line-light); border-radius: var(--sp-radius); padding: 28px; position: sticky; top: calc(var(--sp-header-h) + 20px); }
.sp-side h6 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-muted); margin: 0 0 14px; font-family: var(--sp-font); }
.sp-side dl { margin: 0 0 26px; }
.sp-side dt { font-size: .78rem; color: var(--sp-muted); font-weight: 500; }
.sp-side dd { margin: 0 0 14px; font-weight: 600; }
.sp-shot { border-radius: 18px; overflow: hidden; border: 1px solid var(--sp-line-light); margin-bottom: 14px; box-shadow: 0 30px 60px -36px rgba(31, 60, 140, .5); }
.sp-shot img { width: 100%; display: block; }

/* browser-frame mock used for sites without a screenshot */
.sp-bframe { border-radius: 14px; overflow: hidden; border: 1px solid var(--sp-line); background: #0d1428; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.sp-bbar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #0a1022; border-bottom: 1px solid var(--sp-line); }
.sp-bbar i { width: 10px; height: 10px; border-radius: 50%; background: #3a4468; display: block; }
.sp-bbar i:nth-child(1) { background: #ff5f57; } .sp-bbar i:nth-child(2) { background: #febc2e; } .sp-bbar i:nth-child(3) { background: #28c840; }
.sp-bbar span { margin-left: 10px; font-size: .72rem; color: #7d88a8; background: rgba(255, 255, 255, .05); padding: 3px 12px; border-radius: 99px; flex: 1; max-width: 260px; }

/* ---------- legacy pages inherit a cleaner header band ---------- */
.sp-legacy .page_title { background: var(--sp-ink) !important; color: #fff; }
.sp-legacy .page_title h1 { color: #fff; font-family: var(--sp-font-display); }
.sp-legacy .page_title .breadcrumb a { color: var(--sp-cyan); }
.sp-legacy .btn-maincolor { background: var(--sp-grad); border: 0; border-radius: 999px; color: #fff; }

/* ---------- reveal on scroll ---------- */
.sp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.sp-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sp-reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- service pages ---------- */
.sp-prose h2 { font-size: 1.6rem; margin: 40px 0 14px; }
.sp-prose h2:first-child { margin-top: 0; }
.sp-prose p { color: var(--sp-muted); line-height: 1.8; margin: 0 0 16px; font-size: 1.02rem; }
.sp-prose .sp-checks li { color: var(--sp-text); }
.sp-side .sp-links { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.sp-side .sp-links a { color: var(--sp-text); text-decoration: none; font-weight: 500; font-size: .94rem; }
.sp-side .sp-links a:hover { color: var(--sp-blue); }
.sp-side .sp-links a::before { content: '105'; font-family: FontAwesome; margin-right: 10px; color: var(--sp-blue); }

/* ---------- contact ---------- */
.sp-contact { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .sp-contact { grid-template-columns: 1fr; } }
.sp-form label { display: block; font-weight: 600; font-size: .88rem; margin: 0 0 6px; }
.sp-form input, .sp-form textarea {
	width: 100%; border: 1.5px solid var(--sp-line-light); border-radius: 12px; padding: 13px 16px; font-family: var(--sp-font); font-size: 1rem; margin-bottom: 18px; background: #fff; color: var(--sp-text);
}
.sp-form input:focus, .sp-form textarea:focus { outline: none; border-color: var(--sp-blue); box-shadow: 0 0 0 4px rgba(47, 107, 255, .12); }
.sp-form-status { margin-top: 14px; font-weight: 600; font-size: .95rem; }
.sp-form-status.ok { color: #0fa77a; }
.sp-form-status.err { color: #d63a4a; }
.sp-info { display: grid; gap: 16px; }
.sp-info-item { display: flex; gap: 16px; align-items: center; }
.sp-info-item a { color: var(--sp-text); font-weight: 600; text-decoration: none; }

/* ---------- 404 ---------- */
.sp-404 { text-align: center; padding: 120px 0; }
.sp-404 .big { font-family: var(--sp-font-display); font-size: clamp(5rem, 16vw, 10rem); font-weight: 700; line-height: 1; }

html, body.sp-body { overflow-x: clip; }
.sp-grid > *, .sp-detail > *, .sp-contact > *, .sp-work > * { min-width: 0; }