/* Reusable components shared by every page. */

/* eyebrow */
.so-eyebrow {
	display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
	font: 400 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-d);
}
.so-eyebrow__dot { width: 8px; height: 8px; border-radius: 2px; background: var(--blue); flex-shrink: 0; }
.so-eyebrow--dark { color: var(--cyan); }
.so-eyebrow--dark .so-eyebrow__dot { background: var(--cyan); }

/* headings */
.so-h2 { font-weight: 700; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.so-h2--xl { font-size: var(--fs-h2); }
.so-h2--lg { font-size: var(--fs-h2-lg); letter-spacing: -.04em; line-height: 1; }
.so-h2--ed { font-size: var(--fs-h2-ed); letter-spacing: -.035em; line-height: 1.1; font-weight: 600; max-width: 16em; }
.so-h2--geo { font-size: var(--fs-geo); letter-spacing: -.05em; line-height: .95; }
.so-head .so-h2 + .so-desc { margin-top: 18px; }
.so-desc { max-width: 440px; color: var(--sub); text-wrap: pretty; }
.so-desc--dark { color: var(--on-dark); }
.so-h3 { font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }

/* buttons */
.so-btn {
	display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 28px;
	border-radius: 999px; font-weight: 600; white-space: nowrap; border: 1px solid transparent;
	transition: background .18s, color .18s, transform .18s, box-shadow .18s, border-color .18s;
}
.so-btn--lg { min-height: 58px; padding: 0 30px; font-size: 17px; }
.so-btn--primary { background: var(--blue); color: #fff; }
.so-btn--primary:hover { background: var(--blue-d); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 30px -14px oklch(0.45 0.2 264 / .7); }
.so-btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.so-btn--outline:hover { background: var(--ink); color: #fff; }
.so-btn--light { background: #fff; color: var(--navy); font-weight: 700; }
.so-btn--light:hover { background: var(--cyan); color: oklch(0.17 0.06 268); transform: translateY(-2px); box-shadow: 0 18px 36px -16px oklch(0.8 0.13 220 / .6); }
.so-btn--ghost-dark, .so-btn--wa { border-color: oklch(1 0 0 / .45); color: #fff; font-weight: 600; }
.so-btn--ghost-dark:hover { background: oklch(1 0 0 / .1); color: #fff; border-color: oklch(1 0 0 / .6); }
.so-btn--wa:hover { background: var(--green); border-color: var(--green); color: #fff; }
.so-btn__dot { width: 9px; height: 9px; border-radius: 50%; background: oklch(0.72 0.17 150); }
.so-btn--sm { min-height: 46px; padding: 0 20px; }
.so-btn--sm.so-btn--outline { font-weight: 600; }
.so-arr { display: inline-block; }
.so-link {
	font-weight: 600; color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 2px; align-self: flex-start;
}
.so-link:hover { color: var(--blue); }

/* pills and chips */
.so-pill {
	display: inline-flex; font-size: 13px; font-weight: 500; padding: 6px 11px; border-radius: 999px;
	background: #fff; border: 1px solid var(--line);
}
.so-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.so-tag { font: 400 10px/1 var(--mono); letter-spacing: .04em; }

/* flow chips: Plan → Design → Build */
.so-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 400 11px/1.2 var(--mono); }
.so-flow__step { display: flex; align-items: center; gap: 6px; }
.so-flow__pill { padding: 5px 10px; border-radius: 999px; border: 1px solid oklch(1 0 0 / .25); }
.so-flow__arrow { color: var(--cyan); }
.so-flow--light .so-flow__pill { border-color: var(--line); background: #fff; color: var(--ink); }
.so-flow--light .so-flow__arrow { color: var(--blue); }

/* FAQ accordion */
.so-acc { border-top: 1px solid var(--ink); }
.so-acc__item { position: relative; border-bottom: 1px solid var(--line); }
.so-acc__bar { position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--blue); transition: width .4s var(--ease); }
.so-acc__item.is-open .so-acc__bar { width: 100%; }
.so-acc__h { font-size: inherit; }
.so-acc__btn {
	width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
	min-height: 64px; padding: 16px 4px; background: transparent; border: 0; text-align: left;
	font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; letter-spacing: -.015em; color: var(--ink); transition: color .2s;
}
.so-acc__btn:hover, .so-acc__item.is-open .so-acc__btn { color: var(--blue-d); }
.so-acc__icon {
	flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	font-size: 18px; font-weight: 400; border: 1px solid var(--line); background: #fff; color: var(--ink);
	transition: transform .35s var(--ease), background .2s, border-color .2s, color .2s;
}
.so-acc__item.is-open .so-acc__icon { transform: rotate(45deg); background: var(--blue); border-color: var(--blue); color: #fff; }
.so-acc__a { padding: 0 52px 22px 4px; color: var(--body); font-size: 16px; line-height: 1.6; text-wrap: pretty; }

/* plain pages (legal, insights, enquiry): readable measure */
.so-prose { max-width: 760px; color: var(--body); font-size: 17px; line-height: 1.65; }
.so-prose > * + * { margin-top: 1em; }
.so-prose h2 { margin-top: 2em; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.03em; line-height: 1.15; color: var(--ink); }
.so-prose a { text-decoration: underline; text-underline-offset: 3px; }
.so-posts { display: grid; gap: 0; border-top: 2px solid var(--ink); max-width: 900px; }
.so-posts__item { padding: 26px 0; border-bottom: 1px solid var(--line); }
.so-posts__item time { font: 400 12px/1 var(--mono); letter-spacing: .08em; color: var(--sub); }
.so-posts__item h2 { margin: 8px 0; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -.03em; line-height: 1.1; }
.so-posts__item h2 a { color: var(--ink); }
.so-posts--empty { display: block; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--tint); }
.so-posts--empty b { font-size: 20px; letter-spacing: -.02em; }

/* project enquiry form ([so_project_form]) */
.so-pf { display: grid; gap: 16px; max-width: 760px; }
.so-pf__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.so-pf label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.so-pf input, .so-pf select, .so-pf textarea { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: 16px; font-weight: 400; }
.so-pf input, .so-pf select { min-height: 50px; }
.so-pf input:focus, .so-pf select:focus, .so-pf textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px oklch(0.52 0.21 262 / .2); }
.so-pf button { justify-self: start; }
.so-pf__err { padding: 12px 14px; border-radius: 12px; background: oklch(0.96 0.03 25); color: oklch(0.4 0.14 25); font-size: 14px; }
.so-pf--ok { padding: 22px; border-radius: 16px; background: var(--tint); border: 1px solid var(--line); }
.so-pf--ok b { font-size: 20px; letter-spacing: -.02em; }

/* tabs (generic; used by services list, process, geo) */
[role="tabpanel"][hidden], [data-panel][hidden] { display: none !important; }

/* link arrow rows */
.so-linkrow {
	display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px;
	border-bottom: 1px solid oklch(1 0 0 / .14); color: #fff; font-weight: 600; flex-wrap: wrap;
}
.so-linkrow:hover { color: var(--cyan); }
.so-linkrow small { font: 400 11px/1 var(--mono); color: var(--cyan); }

/* dark CTA panel (final CTA on every page) */
.so-cta { position: relative; padding: clamp(40px, 6vw, 96px) clamp(12px, 2.4vw, 36px) clamp(80px, 10vw, 152px); background: var(--page); }
.so-cta__card {
	position: relative; overflow: hidden; isolation: isolate; max-width: var(--container); margin: 0 auto;
	border-radius: clamp(20px, 2.4vw, 32px); border: 1px solid oklch(1 0 0 / .08); color: #fff;
	background: radial-gradient(ellipse 50% 70% at 82% 45%, oklch(0.5 0.2 260 / .55), transparent 70%),
		radial-gradient(circle at 94% 10%, oklch(0.8 0.13 220 / .3), transparent 26%),
		linear-gradient(140deg, oklch(0.15 0.055 268) 0%, oklch(0.2 0.09 265) 60%, oklch(0.25 0.12 262) 100%);
	box-shadow: 0 60px 120px -60px oklch(0.52 0.21 262 / .7), 0 30px 60px -40px oklch(0.15 0.08 268 / .6);
}
.so-cta__orb { position: absolute; z-index: -1; right: clamp(-380px, -18vw, -140px); top: calc(50% - clamp(250px, 27vw, 430px)); width: clamp(500px, 54vw, 860px); aspect-ratio: 1; pointer-events: none; }
.so-cta__orb > span { position: absolute; border-radius: 50%; }
.so-cta__orb .glow { inset: -12%; background: radial-gradient(closest-side, oklch(0.6 0.2 258 / .55), oklch(0.8 0.13 220 / .14) 62%, transparent); filter: blur(26px); }
.so-cta__orb .ring {
	inset: 0; opacity: .9;
	background: conic-gradient(from 30deg, oklch(0.34 0.17 267), oklch(0.5 0.22 262) 14%, oklch(0.74 0.15 228) 26%, oklch(0.56 0.22 260) 40%, oklch(0.3 0.15 267) 62%, oklch(0.46 0.21 263) 82%, oklch(0.34 0.17 267));
	-webkit-mask-image: radial-gradient(circle closest-side, transparent 52%, #000 55%, #000 85%, transparent 88%);
	mask-image: radial-gradient(circle closest-side, transparent 52%, #000 55%, #000 85%, transparent 88%);
}
.so-cta__orb .rim { inset: 0; background: radial-gradient(circle closest-side, transparent 53%, oklch(0.85 0.1 222 / .5) 54.5%, transparent 57%); }
.so-cta__orb .spk { aspect-ratio: 1; border-radius: 18%; }
.so-cta__inner { position: relative; max-width: var(--container); margin: 0 auto; padding: clamp(56px, 8vw, 120px) clamp(24px, 4vw, 56px) clamp(32px, 4vw, 48px); }
.so-cta__title { font-size: var(--fs-cta); line-height: .9; letter-spacing: -.06em; font-weight: 700; max-width: 8.5em; margin-bottom: 22px; }
.so-cta__lead { max-width: 520px; font-size: var(--fs-lead); color: oklch(0.88 0.02 262); margin-bottom: 32px; text-wrap: pretty; }
.so-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: clamp(40px, 5vw, 72px); }
.so-cta__contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border-top: 1px solid oklch(1 0 0 / .18); }
.so-cta__contacts a { padding: 18px 20px 4px 0; color: #fff; }
.so-cta__contacts a:hover { color: var(--cyan); }
.so-cta__contacts small { display: block; font: 400 11px/1 var(--mono); letter-spacing: .08em; color: var(--cyan); margin-bottom: 4px; }
.so-cta__contacts span { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }

/* compact process timeline (used by service pages): numbered stages, active detail panel */
.so-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.so-step {
	position: relative; text-align: left; border: 0; color: #fff; background: transparent;
	padding: clamp(12px, 1.6vw, 20px) clamp(10px, 1.4vw, 18px); border-radius: 12px 12px 0 0; transition: background .25s;
}
.so-step::after { content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: oklch(1 0 0 / .14); transition: background .25s; }
.so-step.is-past::after { background: oklch(0.62 0.19 258 / .6); }
.so-step[aria-selected="true"] { background: var(--navy-2); }
.so-step[aria-selected="true"]::after { background: var(--cyan); }
.so-step__n { display: block; font-size: clamp(24px, 3.2vw, 50px); font-weight: 700; letter-spacing: -.05em; line-height: 1; color: oklch(1 0 0 / .32); transition: color .25s; }
.so-step.is-past .so-step__n { color: oklch(1 0 0 / .6); }
.so-step[aria-selected="true"] .so-step__n { color: var(--cyan); }
.so-step__t { display: block; margin-top: 8px; font-size: clamp(13px, 1.3vw, 18px); font-weight: 700; }
.so-step-panel {
	background: var(--navy-2); border-radius: 0 0 18px 18px; padding: clamp(22px, 3vw, 40px);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px 48px;
}
.so-step-panel__k { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; color: var(--cyan); margin-bottom: 12px; }
.so-step-panel__d { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.32; letter-spacing: -.015em; font-weight: 500; text-wrap: pretty; }
.so-step-panel li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid oklch(1 0 0 / .12); font-size: 15px; }
.so-step-panel li > span { color: var(--cyan); }
.so-step-panel ul { margin-bottom: 18px; }
.so-get {
	display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px;
	border: 1px solid oklch(0.8 0.13 220 / .5); background: oklch(0.52 0.21 262 / .25); font-size: 14px; font-weight: 600;
}
.so-get small { font: 400 11px/1 var(--mono); color: var(--cyan); }
@media (max-width: 640px) {
	/* five stages on one row stay readable as numbers; names hide until selected */
	.so-step__t { font-size: 12px; }
}

/* intentional "to be confirmed" notices (legal pages): visibly placeholders, structurally clean */
.so-ph { margin: 14px 0; padding: 12px 16px; border: 1px dashed var(--blue-m); border-radius: 12px; background: var(--tint); color: var(--ink); font-size: 15px; line-height: 1.5; }
.so-ph b { color: var(--blue-d); font-weight: 700; }
.so-ph--note { border-style: solid; }