/* Spears Tech Solutions — shared presentation. Design values come from theme.json. */

/* ---------- Base ---------- */
:where(.wp-site-blocks, .editor-styles-wrapper) { overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks, .editor-styles-wrapper) :focus-visible { outline: 3px solid var(--wp--preset--color--focus); outline-offset: 3px; border-radius: 2px; }
:where(.wp-site-blocks, .editor-styles-wrapper) a { text-underline-offset: 0.22em; text-decoration-thickness: 0.07em; }
:where(.wp-site-blocks, .editor-styles-wrapper) a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--accent-hover); text-decoration-thickness: 0.14em; }
::selection { background: var(--wp--preset--color--signal); color: var(--wp--preset--color--ink); }
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks > footer { margin-block-start: 0; }

.spears-tech-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .75rem 1rem; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--on-ink); }
.spears-tech-skip:focus { left: 1rem; top: 1rem; }

.spears-tech-main { margin-block-start: 0; padding-block: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl); }
.spears-tech-main.is-canvas { padding-block: 0; }
.spears-tech-main.is-canvas > .wp-block-post-content > * { margin-block: 0; }

/* Buttons */
.wp-element-button, .wp-block-button__link { transition: background-color .15s ease, color .15s ease, transform .15s ease; }
:where(.wp-block-button:not(.is-style-outline)) > .wp-block-button__link:is(:hover, :active) { background-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); }
.wp-block-button.is-style-outline > .wp-block-button__link { border: 1.5px solid currentColor; background: transparent; color: var(--wp--preset--color--text); padding: calc(.875rem - 1.5px) calc(1.375rem - 1.5px); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--text); color: var(--wp--preset--color--canvas); }
.wp-block-button.is-style-signal > .wp-block-button__link { background: var(--wp--preset--color--signal); color: var(--wp--preset--color--ink); }
.wp-block-button.is-style-signal > .wp-block-button__link:hover { background: var(--wp--preset--color--on-ink); color: var(--wp--preset--color--ink); }

/* ---------- Typographic utilities ---------- */
.sts-eyebrow { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); display: flex; align-items: center; gap: .625rem; }
.sts-eyebrow::before { content: ""; inline-size: 1.5rem; block-size: 2px; background: var(--wp--preset--color--signal); flex: none; }
.sts-eyebrow.is-plain::before { display: none; }
.sts-meta { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: .04em; color: var(--wp--preset--color--muted); }
.sts-lead { font-size: var(--wp--preset--font-size--lead); line-height: 1.5; color: var(--wp--preset--color--muted); max-inline-size: 38rem; }
.sts-balance { text-wrap: balance; }
.sts-mark { color: var(--wp--preset--color--accent); }
.sts-arrow-link a, a.sts-arrow-link { font-weight: 600; text-decoration: none; color: var(--wp--preset--color--text); border-block-end: 2px solid var(--wp--preset--color--signal); padding-block-end: 2px; }
.sts-arrow-link a:hover, a.sts-arrow-link:hover { color: var(--wp--preset--color--accent); }

/* ---------- Sections ---------- */
.sts-section { padding-block: var(--wp--preset--spacing--xl); }
.sts-section.is-tight { padding-block: var(--wp--preset--spacing--lg); }
.sts-section.has-rule { border-block-start: 1px solid var(--wp--preset--color--border); }
.sts-section-head { display: grid; gap: var(--wp--preset--spacing--sm); margin-block-end: var(--wp--preset--spacing--lg) !important; max-inline-size: 52rem; }
.sts-section-head > * { margin: 0 !important; }

.sts-dark { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--on-ink); --wp--preset--color--muted: var(--wp--preset--color--on-ink-muted); --wp--preset--color--border: #2b313b; --wp--preset--color--focus: var(--wp--preset--color--signal); }
.sts-dark a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--on-ink); }
.sts-dark a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--signal); }
.sts-dark .sts-arrow-link a, .sts-dark a.sts-arrow-link { color: var(--wp--preset--color--on-ink); }
.sts-dark .wp-block-button:not(.is-style-outline):not(.is-style-signal) > .wp-block-button__link { background: var(--wp--preset--color--on-ink); color: var(--wp--preset--color--ink); }
.sts-dark .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--on-ink); }
.sts-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--on-ink); color: var(--wp--preset--color--ink); }
.sts-shade { background: var(--wp--preset--color--surface); }

/* ---------- Header ---------- */
/* The frosted background lives on a pseudo-element: backdrop-filter on the header itself would make it the containing block for the fixed mobile menu overlay and clip it. */
:root { --sts-header-h: 4.5rem; }
@media (max-width: 599px) { :root { --sts-header-h: 4rem; } }
/* Fixed (not sticky) so returning focus to the menu toggle never scrolls the page back to the top. */
.spears-tech-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; box-sizing: border-box; block-size: var(--sts-header-h); padding-block: 0; display: flex; align-items: center; }
.spears-tech-header > .alignwide { inline-size: 100%; }
.wp-site-blocks { padding-block-start: var(--sts-header-h); }
:where(.wp-site-blocks) [id] { scroll-margin-top: calc(var(--sts-header-h) + 1rem); }
.spears-tech-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--wp--preset--color--canvas) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--border) 55%, transparent); }

body.admin-bar .spears-tech-header { top: var(--wp-admin--admin-bar--height, 32px); }
.spears-tech-brand { gap: .625rem !important; }
.spears-tech-header .wp-block-site-logo img { inline-size: auto; block-size: 2.25rem; max-inline-size: none; }
.spears-tech-brand .wp-block-site-title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.1; margin: 0; }
.spears-tech-brand .wp-block-site-title a { text-decoration: none; color: var(--wp--preset--color--text); }
.spears-tech-header__cta .wp-block-button__link { padding: .625rem 1.05rem; font-size: var(--wp--preset--font-size--small); }
@media (max-width: 599px) { .spears-tech-header .wp-block-buttons.spears-tech-header__cta { display: none; } .spears-tech-header .wp-block-site-logo img { block-size: 2rem; } }
@media (max-width: 380px) { .spears-tech-brand .wp-block-site-title { font-size: .9375rem; } }

/* ---------- Navigation ----------
   Core Navigation block keeps its native dialog semantics, focus trap,
   Escape-to-close, scroll lock and focus return. This layer is presentation only. */
.spears-tech-navigation { min-inline-size: 0; max-inline-size: 100%; color: var(--wp--preset--color--text); --sts-nav-bar: var(--sts-header-h); }
.spears-tech-navigation .wp-block-navigation-item__content { white-space: normal; text-decoration: none; }
.spears-tech-navigation .is-mobile-cta { display: none !important; }

/* Desktop / inline */
.spears-tech-navigation:not(:has(.is-menu-open)) .wp-block-navigation-item__content { padding-block: .375rem; }
.spears-tech-navigation .wp-block-navigation-item__content:is(:hover, :focus-visible) { color: var(--wp--preset--color--accent); text-decoration: underline; text-decoration-color: var(--wp--preset--color--signal); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.spears-tech-navigation .current-menu-item > .wp-block-navigation-item__content, .spears-tech-navigation [aria-current="page"] { text-decoration: underline; text-decoration-color: var(--wp--preset--color--signal); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.spears-tech-navigation.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container { background: var(--wp--preset--color--canvas); color: var(--wp--preset--color--text); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--card); padding: .375rem; box-shadow: var(--wp--custom--shadow--frame); min-inline-size: 13rem; }
.spears-tech-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .5rem .75rem; }

/* Toggle: a clearly bordered 44px button that matches the header */
.spears-tech-navigation .wp-block-navigation__responsive-container-open { box-sizing: border-box; inline-size: 44px; block-size: 44px; place-items: center; padding: 0; border: 1.5px solid var(--wp--preset--color--text); border-radius: var(--wp--custom--radius--control); background: transparent; color: var(--wp--preset--color--text); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.spears-tech-navigation .wp-block-navigation__responsive-container-open:hover { background: var(--wp--preset--color--text); color: var(--wp--preset--color--canvas); }
.spears-tech-navigation .wp-block-navigation__responsive-container-open svg { inline-size: 22px; block-size: 22px; }

/* Preserve WordPress's native submenu interaction while enlarging the compact
 * chevron's pointer target. The visual glyph intentionally remains small. */
.spears-tech-navigation .wp-block-navigation__submenu-icon {
	box-sizing: border-box;
	display: inline-grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	min-inline-size: 2rem;
	min-block-size: 2rem;
	margin-inline-start: .125rem;
	padding: 0;
	border-radius: var(--wp--custom--radius--control);
}
.spears-tech-navigation .wp-block-navigation__submenu-icon:hover { background: var(--wp--preset--color--surface); }
.spears-tech-navigation .wp-block-navigation__submenu-icon:focus-visible { outline: 3px solid var(--wp--preset--color--focus); outline-offset: 2px; }
.spears-tech-navigation .wp-block-navigation__submenu-icon svg { inline-size: 11px; block-size: 11px; }
@media (max-width: 599px) { .spears-tech-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-grid; } }
.spears-tech-navigation :is(a, button):focus-visible { outline: 3px solid var(--wp--preset--color--focus); outline-offset: 3px; }

/* Open overlay: full-screen sheet in the Workbench language */
.spears-tech-header .spears-tech-navigation.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { position: fixed; inset: 0; z-index: 100000; padding: 0; background: var(--wp--preset--color--canvas); color: var(--wp--preset--color--text); overflow-y: auto; overscroll-behavior: contain; }
.spears-tech-navigation .is-menu-open .wp-block-navigation__responsive-close { max-inline-size: none; inline-size: 100%; min-block-size: 100%; }
.spears-tech-navigation .is-menu-open .wp-block-navigation__responsive-dialog { position: relative; box-sizing: border-box; display: flex; flex-direction: column; min-block-size: 100dvh; gap: 0 !important; padding: 0 var(--wp--preset--spacing--gutter) calc(1.25rem + env(safe-area-inset-bottom)); animation: sts-menu-in .22s cubic-bezier(.2, .7, .2, 1); }
.spears-tech-navigation .is-menu-open .wp-block-navigation__responsive-dialog::before { content: "Spears Tech Solutions \00B7  Menu" / ""; display: flex; align-items: center; block-size: var(--sts-nav-bar); padding-block-start: env(safe-area-inset-top); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); border-block-end: 1px solid var(--wp--preset--color--border); }
.spears-tech-navigation .is-menu-open .wp-block-navigation__responsive-container-close { position: absolute; top: calc((var(--sts-nav-bar) - 44px) / 2 + env(safe-area-inset-top)); right: var(--wp--preset--spacing--gutter); box-sizing: border-box; inline-size: 44px; block-size: 44px; display: grid; place-items: center; padding: 0; border: 1.5px solid var(--wp--preset--color--text); border-radius: var(--wp--custom--radius--control); background: var(--wp--preset--color--text); color: var(--wp--preset--color--canvas); cursor: pointer; }
.spears-tech-navigation .is-menu-open .wp-block-navigation__responsive-container-close svg { inline-size: 22px; block-size: 22px; fill: currentColor; }
.spears-tech-navigation .is-menu-open .wp-block-navigation__responsive-container-content { flex: 1; display: flex; flex-direction: column; align-items: stretch; padding-block-start: .5rem !important; margin: 0 !important; }
.spears-tech-navigation .is-menu-open .wp-block-navigation__container { flex: 1; display: flex; flex-direction: column; align-items: stretch !important; justify-content: flex-start; gap: 0 !important; inline-size: 100%; counter-reset: stsnav; }
.spears-tech-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.is-mobile-cta) { display: block; inline-size: 100%; border-block-end: 1px solid var(--wp--preset--color--border); counter-increment: stsnav; }
.spears-tech-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.is-mobile-cta) > .wp-block-navigation-item__content { display: flex; align-items: baseline; gap: .875rem; inline-size: 100%; box-sizing: border-box; min-block-size: 3.75rem; padding-block: .9rem; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.625rem, 7.4vw, 2rem); font-weight: 650; letter-spacing: -.025em; line-height: 1.1; color: var(--wp--preset--color--text); }
.spears-tech-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.is-mobile-cta) > .wp-block-navigation-item__content::before { content: counter(stsnav, decimal-leading-zero) / ""; flex: none; inline-size: 1.75rem; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); font-weight: 500; letter-spacing: .04em; color: var(--wp--preset--color--accent); transform: translateY(-.15em); }
.spears-tech-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"]) { color: var(--wp--preset--color--accent); text-decoration: none; }
.spears-tech-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]::after { content: ""; inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: var(--wp--preset--color--signal); align-self: center; margin-inline-start: auto; }
/* Services sub-links: quieter, indented under the label */
.spears-tech-navigation .is-menu-open .has-child .wp-block-navigation__submenu-icon { display: none; }
.spears-tech-navigation.wp-block-navigation .is-menu-open .has-child .wp-block-navigation__submenu-container { position: static; display: flex; flex-direction: column; gap: 0; inline-size: 100%; min-inline-size: 0; box-sizing: border-box; padding: 0 0 .75rem 2.625rem; margin: -.375rem 0 0; border: 0; align-items: flex-start !important; box-shadow: none; background: transparent; opacity: 1; visibility: visible; height: auto; overflow: visible; }
.spears-tech-navigation .is-menu-open .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: flex; align-items: center; min-block-size: 2.75rem; padding: 0; font-family: var(--wp--preset--font-family--system); font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; color: var(--wp--preset--color--muted); }
.spears-tech-navigation .is-menu-open .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before { content: "\2192" / ""; margin-inline-end: .5rem; color: var(--wp--preset--color--signal); }
.spears-tech-navigation .is-menu-open .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"]) { color: var(--wp--preset--color--accent); }
.spears-tech-navigation .is-menu-open .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item { inline-size: 100%; justify-content: flex-start !important; align-items: flex-start !important; }
/* Contact CTAs pinned to the bottom of the sheet */
.spears-tech-navigation .is-menu-open .is-mobile-cta { display: block !important; inline-size: 100%; }
.spears-tech-navigation .is-menu-open .is-mobile-cta--primary { margin-block-start: auto; padding-block-start: 1.75rem; }
.spears-tech-navigation .is-menu-open .is-mobile-cta > .wp-block-navigation-item__content { display: flex; align-items: center; justify-content: center; box-sizing: border-box; inline-size: 100%; min-block-size: 3.25rem; border-radius: var(--wp--custom--radius--control); font-family: var(--wp--preset--font-family--system); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; }
.spears-tech-navigation .is-menu-open .is-mobile-cta--primary > .wp-block-navigation-item__content { background: var(--wp--preset--color--text); color: var(--wp--preset--color--canvas); }
.spears-tech-navigation .is-menu-open .is-mobile-cta--primary > .wp-block-navigation-item__content:is(:hover, :focus-visible) { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); text-decoration: none; }
.spears-tech-navigation .is-menu-open .is-mobile-cta--call { padding-block-start: .625rem; }
.spears-tech-navigation .is-menu-open .is-mobile-cta--call > .wp-block-navigation-item__content { border: 1.5px solid var(--wp--preset--color--text); color: var(--wp--preset--color--text); }
.spears-tech-navigation .is-menu-open .is-mobile-cta--call > .wp-block-navigation-item__content:is(:hover, :focus-visible) { background: var(--wp--preset--color--surface); text-decoration: none; }
.spears-tech-navigation .is-menu-open .is-mobile-cta--call::after { content: "Mon\2013 Fri \00B7  8 AM\2013 5 PM \00B7  Bryant, AR" / ""; display: block; margin-block-start: .875rem; text-align: center; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: .04em; color: var(--wp--preset--color--muted); }
.spears-tech-navigation .is-menu-open .wp-block-navigation__responsive-dialog::before { padding-inline-end: 3.75rem; white-space: nowrap; overflow: hidden; }
@media (max-width: 359px) { .spears-tech-navigation .is-menu-open .wp-block-navigation__responsive-dialog::before { content: "Menu" / ""; } }
/* Transform only: the sheet is fully opaque from the first frame even if animations are throttled. */
@keyframes sts-menu-in { from { transform: translateY(-.75rem); } to { transform: none; } }
/* Keep the assistant out of the way while the menu is open */
html.has-modal-open .sts-sa { display: none !important; }
@media (max-width: 599px) { .sts-sa { right: calc(.875rem + env(safe-area-inset-right)) !important; bottom: calc(.875rem + env(safe-area-inset-bottom)) !important; } }
@media (max-height: 560px) { .spears-tech-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.is-mobile-cta) > .wp-block-navigation-item__content { min-block-size: 3rem; padding-block: .55rem; font-size: 1.5rem; } }
/* ---------- Hero ---------- */
.sts-hero { padding-block: clamp(2.5rem, 6vw, 5.5rem) var(--wp--preset--spacing--xl); position: relative; overflow: clip; }
.sts-hero__grid { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.sts-hero__grid > * { margin: 0 !important; }
.sts-hero h1 { font-size: var(--wp--preset--font-size--mega); line-height: .95; letter-spacing: -.045em; margin-block: 1.25rem 1.5rem; text-wrap: balance; }
.sts-hero h1 em { font-style: normal; color: var(--wp--preset--color--accent); }
.sts-hero .sts-lead { margin-block-end: 2rem; }
.sts-hero__services { margin-block-start: 2rem !important; }
@media (max-width: 899px) { .sts-hero__grid { grid-template-columns: 1fr; } }

/* Browser frames — real screenshots in a quiet chrome */
.sts-frame { margin: 0; background: #fff; border-radius: var(--wp--custom--radius--card); box-shadow: var(--wp--custom--shadow--frame); overflow: hidden; border: 1px solid rgba(14,17,22,.12); position: relative; }
.sts-frame::before { content: ""; display: block; block-size: 1.75rem; background: #e6e2da radial-gradient(circle at .9rem 50%, #c9c3b8 .22rem, transparent .24rem) , radial-gradient(circle at 1.6rem 50%, #c9c3b8 .22rem, transparent .24rem), radial-gradient(circle at 2.3rem 50%, #c9c3b8 .22rem, transparent .24rem); background-color: #e6e2da; border-block-end: 1px solid rgba(14,17,22,.08); }
.sts-frame img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.sts-frame figcaption { display: none; }

.sts-stack { position: relative; min-block-size: clamp(20rem, 40vw, 34rem); }
.sts-stack > .sts-frame { position: absolute; inline-size: 78%; margin: 0 !important; }
.sts-stack > .sts-frame:nth-child(1) { inset-block-start: 0; inset-inline-end: 0; transform: rotate(1.25deg); z-index: 1; }
.sts-stack > .sts-frame:nth-child(2) { inset-block-start: 26%; inset-inline-start: 0; transform: rotate(-1.75deg); z-index: 2; }
.sts-stack > .sts-frame:nth-child(3) { inset-block-end: 0; inset-inline-end: 6%; inline-size: 62%; transform: rotate(.75deg); z-index: 3; }
.sts-stack::after { content: "Live client sites"; position: absolute; z-index: 4; inset-block-end: -.5rem; inset-inline-start: 0; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: .06em; text-transform: uppercase; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--on-ink); padding: .4rem .7rem; border-radius: 999px; }
@media (max-width: 899px) { .sts-stack { min-block-size: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .sts-stack > .sts-frame, .sts-stack > .sts-frame:nth-child(n) { position: static; inline-size: auto; transform: none !important; } .sts-stack > .sts-frame:nth-child(1) { grid-column: 1 / -1; } .sts-stack::after { display: none; } }

/* ---------- Sector strip ---------- */
.sts-sectors { border-block: 1px solid var(--wp--preset--color--border); padding-block: var(--wp--preset--spacing--md); }
.sts-sectors__inner { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; }
.sts-sectors__inner > * { margin: 0 !important; }
.sts-sectors__title { font-family: var(--wp--preset--font-family--display); font-weight: 650; font-size: var(--wp--preset--font-size--lead); letter-spacing: -.01em; }
.sts-sectors ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 0; color: var(--wp--preset--color--muted); }
.sts-sectors li { display: inline-flex; align-items: center; }
.sts-sectors li + li::before { content: ""; inline-size: .3rem; block-size: .3rem; border-radius: 50%; background: var(--wp--preset--color--signal); margin-inline: .75rem; }

/* ---------- Work grid ---------- */
.sts-work { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem); }
.sts-work > * { margin: 0 !important; }
.sts-work-card { grid-column: span 6; display: grid; gap: .875rem; align-content: start; }
.sts-work-card > * { margin: 0 !important; }
.sts-work.is-featured > .sts-work-card:nth-child(4n+1) { grid-column: 1 / span 7; }
.sts-work.is-featured > .sts-work-card:nth-child(4n+2) { grid-column: 8 / span 5; margin-block-start: clamp(0rem, 8vw, 6rem) !important; }
.sts-work.is-featured > .sts-work-card:nth-child(4n+3) { grid-column: 1 / span 5; }
.sts-work.is-featured > .sts-work-card:nth-child(4n+4) { grid-column: 6 / span 7; margin-block-start: clamp(0rem, 6vw, 4rem) !important; }
.sts-work-card .sts-frame { transition: transform .25s ease, box-shadow .25s ease; }
.sts-work-card:hover .sts-frame, .sts-work-card:focus-within .sts-frame { transform: translateY(-4px); }
.sts-work-card h3 { margin-block-start: .25rem !important; }
.sts-work-card h3 a { text-decoration: none; color: inherit; }
.sts-work-card h3 a::after { content: " \2197"; color: var(--wp--preset--color--accent); font-size: .8em; }
.sts-work-card p:not(.sts-meta) { color: var(--wp--preset--color--muted); max-inline-size: 34rem; }
@media (max-width: 781px) { .sts-work > .sts-work-card, .sts-work.is-featured > .sts-work-card:nth-child(n) { grid-column: 1 / -1; margin-block-start: 0 !important; } }

/* ---------- Service ledger ---------- */
.sts-ledger { border-block-start: 1px solid var(--wp--preset--color--border); }
.sts-ledger > * { margin: 0 !important; }
.sts-ledger__row { display: grid !important; grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.4fr) minmax(9rem, auto); gap: .5rem 2rem; align-items: baseline; padding-block: 1.5rem; border-block-end: 1px solid var(--wp--preset--color--border); }
.sts-ledger__row > * { margin: 0 !important; }
.sts-ledger__row .sts-meta:first-child { color: var(--wp--preset--color--accent); }
.sts-dark .sts-ledger__row .sts-meta:first-child { color: var(--wp--preset--color--signal); }
.sts-ledger__row h3 { font-size: var(--wp--preset--font-size--title); }
.sts-ledger__row p { color: var(--wp--preset--color--muted); }
.sts-ledger__row .sts-ledger__aside { text-align: end; font-size: var(--wp--preset--font-size--small); }
@media (max-width: 781px) { .sts-ledger__row { grid-template-columns: 2.5rem minmax(0, 1fr); } .sts-ledger__row > :nth-child(n+3) { grid-column: 2; } .sts-ledger__row .sts-ledger__aside { text-align: start; } }

/* ---------- Built, not bought ---------- */
.sts-build__grid { display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.sts-build__grid > * { margin: 0 !important; }
.sts-toolkit { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--wp--preset--color--border); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--small); }
.sts-toolkit li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .9rem; border-block-end: 1px solid var(--wp--preset--color--border); }
.sts-toolkit li span:first-child { text-align: start; }
.sts-toolkit li span:last-child { color: var(--wp--preset--color--muted); text-align: end; }
@media (max-width: 899px) { .sts-build__grid { grid-template-columns: 1fr; } }

/* ---------- Founder ---------- */
.sts-founder { display: grid !important; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sts-founder > * { margin: 0 !important; }
.sts-founder .wp-block-image { margin: 0; position: relative; }
.sts-founder .wp-block-image img { border-radius: var(--wp--custom--radius--card); aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% center; inline-size: 100%; block-size: auto; }
.sts-founder .wp-block-image figcaption { position: absolute; inset-inline-start: 1rem; inset-block-end: 1rem; margin: 0; background: var(--wp--preset--color--canvas); color: var(--wp--preset--color--text); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); padding: .4rem .7rem; border-radius: 999px; }
.sts-founder__body > * + * { margin-block-start: 1.25rem; }
.sts-sig { font-family: var(--wp--preset--font-family--display); font-weight: 650; font-size: var(--wp--preset--font-size--lead); }
@media (max-width: 781px) { .sts-founder { grid-template-columns: 1fr; } .sts-founder .wp-block-image img { aspect-ratio: 4 / 3; } }

/* ---------- Steps ---------- */
.sts-steps { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0; counter-reset: step; border-block-start: 2px solid var(--wp--preset--color--text); }
.sts-steps > * { margin: 0 !important; }
.sts-step { padding: 1.5rem 1.5rem 0 0; counter-increment: step; }
.sts-step > * { margin: 0 !important; }
.sts-step > * + * { margin-block-start: .625rem !important; }
.sts-step::before { content: "0" counter(step); display: block; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--accent); margin-block-end: .75rem; }
.sts-step h3 { font-size: var(--wp--preset--font-size--lead); }
.sts-step p { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.sts-dark .sts-step::before { color: var(--wp--preset--color--signal); }
.sts-dark .sts-steps { border-color: var(--wp--preset--color--signal); }

/* ---------- CTA ---------- */
.sts-cta h2 { font-size: var(--wp--preset--font-size--display); line-height: 1; letter-spacing: -.04em; max-inline-size: 18ch; }
.sts-cta__row { display: grid !important; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 2rem 4rem; align-items: end; }
.sts-cta__row > * { margin: 0 !important; }
.sts-contact-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.sts-contact-lines li { display: grid; gap: .125rem; }
.sts-contact-lines .sts-meta { text-transform: uppercase; letter-spacing: .08em; }
.sts-contact-lines a { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--lead); font-weight: 600; text-decoration: none; }
@media (max-width: 899px) { .sts-cta__row { grid-template-columns: 1fr; } }

/* ---------- Page intro ---------- */
.sts-intro { padding-block: clamp(2.5rem, 6vw, 5rem) var(--wp--preset--spacing--lg); }
.sts-intro h1 { max-inline-size: 16ch; text-wrap: balance; margin-block: 1rem 1.25rem; }

/* ---------- Cards / pricing ---------- */
.sts-cards { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; }
.sts-cards > * { margin: 0 !important; }
.sts-card { background: var(--wp--preset--color--canvas); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--card); padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .875rem; }
.sts-card > * { margin: 0 !important; }
.sts-card.is-featured { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--on-ink); border-color: var(--wp--preset--color--ink); --wp--preset--color--muted: var(--wp--preset--color--on-ink-muted); }
.sts-card.is-featured .wp-block-button__link { background: var(--wp--preset--color--signal); color: var(--wp--preset--color--ink); }
.sts-card .wp-block-buttons { margin-block-start: auto !important; padding-block-start: .5rem; }
.sts-price { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--heading); font-weight: 650; letter-spacing: -.03em; line-height: 1; }
.sts-price small { font-family: var(--wp--preset--font-family--system); font-size: var(--wp--preset--font-size--small); font-weight: 400; letter-spacing: 0; color: var(--wp--preset--color--muted); }
.sts-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: var(--wp--preset--font-size--small); }
.sts-checks li { padding-inline-start: 1.5rem; position: relative; }
.sts-checks li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .5em; inline-size: .7rem; block-size: .4rem; border-inline-start: 2px solid var(--wp--preset--color--accent); border-block-end: 2px solid var(--wp--preset--color--accent); transform: rotate(-45deg); }
.sts-card.is-featured .sts-checks li::before, .sts-dark .sts-checks li::before { border-color: var(--wp--preset--color--signal); }
.sts-badge { align-self: flex-start; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); text-transform: uppercase; letter-spacing: .08em; background: var(--wp--preset--color--signal); color: var(--wp--preset--color--ink); padding: .25rem .6rem; border-radius: 999px; }
.sts-note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); max-inline-size: 48rem; }

/* Two-column text split */
.sts-split { display: grid !important; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.sts-split > * { margin: 0 !important; }
.sts-split__body > * + * { margin-block-start: 1.25rem; }
@media (max-width: 781px) { .sts-split { grid-template-columns: 1fr; } }

/* FAQ (core Details block) */
.sts-faq { border-block-start: 1px solid var(--wp--preset--color--border); }
.sts-faq .wp-block-details { border-block-end: 1px solid var(--wp--preset--color--border); padding-block: 1.125rem; margin: 0; }
.sts-faq .wp-block-details summary { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: var(--wp--preset--font-size--lead); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.sts-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.sts-faq .wp-block-details summary::after { content: "+"; font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--accent); flex: none; }
.sts-faq .wp-block-details[open] summary::after { content: "\2212"; }
.sts-faq .wp-block-details > :not(summary) { color: var(--wp--preset--color--muted); max-inline-size: 46rem; margin-block-start: .75rem; }

/* ---------- Forms (STS Contact plugin markup) ---------- */
.sts-form { display: grid; gap: 1.125rem; }
.sts-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; }
@media (max-width: 599px) { .sts-form__grid { grid-template-columns: 1fr; } }
.sts-form label { display: block; font-weight: 600; font-size: var(--wp--preset--font-size--small); margin-block-end: .375rem; }
.sts-form .sts-req { color: var(--wp--preset--color--accent); }
.sts-form :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]), select, textarea) { box-sizing: border-box; inline-size: 100%; font: inherit; color: var(--wp--preset--color--text); background: #fff; border: 1.5px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--control); padding: .75rem .875rem; min-block-size: 48px; }
.sts-form textarea { min-block-size: 9rem; resize: vertical; }
.sts-form :is(input, select, textarea):focus-visible { border-color: var(--wp--preset--color--focus); }
.sts-form button[type=submit] { justify-self: start; font: inherit; font-weight: 600; cursor: pointer; border: 0; border-radius: var(--wp--custom--radius--control); background: var(--wp--preset--color--text); color: var(--wp--preset--color--canvas); padding: .9rem 1.5rem; min-block-size: 48px; }
.sts-form button[type=submit]:hover { background: var(--wp--preset--color--accent); }
.sts-form__hp { position: absolute !important; left: -9999px !important; inline-size: 1px; block-size: 1px; overflow: hidden; }
.sts-form__notice { padding: 1rem 1.25rem; border-radius: var(--wp--custom--radius--control); border-inline-start: 4px solid var(--wp--preset--color--accent); background: var(--wp--preset--color--surface); }
.sts-form__notice.is-error { border-color: #b3261e; }
.sts-form__privacy { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.sts-panel { background: var(--wp--preset--color--surface); border-radius: var(--wp--custom--radius--card); padding: clamp(1.25rem, 4vw, 2.5rem); }

/* ---------- Footer ---------- */
.spears-tech-footer { padding-block: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md); }
.spears-tech-footer__top { display: grid !important; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, .7fr)); gap: 2.5rem; }
.spears-tech-footer__top > * { margin: 0 !important; }
.spears-tech-footer h2 { font-size: var(--wp--preset--font-size--heading); max-inline-size: 14ch; }
.spears-tech-footer h3 { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--wp--preset--color--on-ink-muted); margin-block-end: 1rem; }
.spears-tech-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.spears-tech-footer a { text-decoration: none; }
.spears-tech-footer a:hover { text-decoration: underline; }
.spears-tech-footer__base { margin-block-start: var(--wp--preset--spacing--xl) !important; padding-block-start: var(--wp--preset--spacing--md); border-block-start: 1px solid #2b313b; display: flex !important; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--on-ink-muted); font-family: var(--wp--preset--font-family--mono); }
.spears-tech-footer__base > * { margin: 0 !important; }
@media (max-width: 899px) { .spears-tech-footer__top { grid-template-columns: 1fr 1fr; } .spears-tech-footer__top > :first-child { grid-column: 1 / -1; } }

/* ---------- Blog ---------- */
.sts-post-list .wp-block-post { padding-block: 1.5rem; border-block-end: 1px solid var(--wp--preset--color--border); }
.sts-post-list .wp-block-post-title a { text-decoration: none; }

/* Native search and comment controls */
.wp-block-search .wp-block-search__input, .spears-tech-comments input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .spears-tech-comments textarea { box-sizing: border-box; max-inline-size: 100%; border: 1.5px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--control); background: #fff; color: var(--wp--preset--color--text); font: inherit; padding: .75rem; }
.spears-tech-comments :where(.comment-form-author, .comment-form-email, .comment-form-url) input, .spears-tech-comments textarea { display: block; inline-size: 100%; }
:where(.wp-block-search__button, .spears-tech-comments input[type="submit"]) { min-block-size: 44px; }

/* ---------- Motion & modes ---------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } .sts-stack > .sts-frame { transform: none !important; } }
@media (forced-colors: active) { .spears-tech-navigation :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close, .wp-block-navigation__submenu-icon) { border: 1px solid ButtonText; } :where(.wp-site-blocks, .editor-styles-wrapper) :focus-visible { outline-color: Highlight; } .sts-frame { border: 1px solid CanvasText; } .sts-eyebrow::before, .sts-sectors li + li::before { background: CanvasText; } }
@media print { .spears-tech-header, .spears-tech-footer, .sts-stack { display: none; } }

/* Sector list on narrow screens: two tidy columns instead of wrapped bullets */
@media (max-width: 599px) {
	.sts-intro h1 { font-size: clamp(2.625rem, 12vw, 3.5rem); line-height: .98; letter-spacing: -.04em; }
	.sts-sectors ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; font-size: var(--wp--preset--font-size--small); }
	.sts-sectors li::before, .sts-sectors li + li::before { content: ""; inline-size: .3rem; block-size: .3rem; border-radius: 50%; background: var(--wp--preset--color--signal); margin-inline: 0 .5rem; flex: none; }
}

.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }

.sts-frame a { display: block; line-height: 0; }
:where(.wp-site-blocks) :is(h1, h2, h3) { text-wrap: balance; }
.sts-lead, .sts-card p, .sts-work-card p { text-wrap: pretty; }

@media (max-width: 599px) { .spears-tech-footer__top > :last-child { grid-column: 1 / -1; } }

/* Mobile hero rhythm: bring the project imagery above the fold without changing content */
@media (max-width: 599px) {
	.sts-hero.has-global-padding { padding-block-start: 1.75rem; }
	.sts-hero h1.wp-block-heading { margin-block-start: 1rem; }
	.sts-hero .sts-lead { margin-block-start: 1rem; font-size: 1.0625rem; line-height: 1.55; }
	.sts-hero .wp-block-buttons { margin-block-start: 1.25rem; }
	.sts-hero .sts-hero__services { margin-block-start: 1.25rem; }
	.sts-hero .sts-stack { margin-block-start: 1.5rem; }
}

/* ==========================================================================
   Final visual pass (2026-10-18)
   ========================================================================== */

/* Header offset: win over global styles regardless of stylesheet order (the
   Contact page prints global styles after this file). */
:root .wp-site-blocks { padding-block-start: var(--sts-header-h); }

/* STS Smart Assistant launcher: compact icon button that reveals its label on
   hover/focus. Accessible name stays on the button's aria-label; plugin files
   are untouched. */
.sts-sa .sts-sa__launcher { --sts-sa-size: 3.25rem; box-sizing: border-box; min-height: 0; block-size: var(--sts-sa-size); min-inline-size: var(--sts-sa-size); padding: 0 calc((var(--sts-sa-size) - 24px) / 2); gap: 0; justify-content: center; white-space: nowrap; box-shadow: 0 0 0 2px var(--wp--preset--color--canvas), 0 6px 18px rgba(14, 17, 22, .2); transition: transform .18s ease, box-shadow .18s ease, padding .22s ease; }
.sts-sa .sts-sa__launcher span { display: inline-block; max-inline-size: 0; overflow: hidden; opacity: 0; font-weight: 600; font-size: .9375rem; transition: max-inline-size .22s ease, opacity .15s ease, margin .22s ease; }
.sts-sa .sts-sa__launcher:is(:hover, :focus-visible) { box-shadow: 0 0 0 2px var(--wp--preset--color--canvas), 0 10px 26px rgba(14, 17, 22, .26); }
@media (min-width: 600px) and (hover: hover) {
	.sts-sa .sts-sa__launcher:is(:hover, :focus-visible) { padding-inline-end: 1.125rem; }
	.sts-sa .sts-sa__launcher:is(:hover, :focus-visible) span { max-inline-size: 12rem; opacity: 1; margin-inline-start: .625rem; }
}
@media (min-width: 600px) and (hover: none) {
	.sts-sa .sts-sa__launcher:focus-visible { padding-inline-end: 1.125rem; }
	.sts-sa .sts-sa__launcher:focus-visible span { max-inline-size: 12rem; opacity: 1; margin-inline-start: .625rem; }
}
@media (max-width: 599px) { .sts-sa .sts-sa__launcher { --sts-sa-size: 3rem; } }
@media (prefers-reduced-motion: reduce) { .sts-sa .sts-sa__launcher, .sts-sa .sts-sa__launcher span { transition: none; } }
@media (forced-colors: active) { .sts-sa .sts-sa__launcher { border: 2px solid ButtonText; } }

/* Footer: clear the launcher at the end of the page, make contact details
   read as contact details, roomier tap rows on phones. */
.spears-tech-footer { padding-block-end: calc(var(--wp--preset--spacing--md) + 4.5rem); }
.spears-tech-footer__top > :last-child li:not(:has(a)) { color: var(--wp--preset--color--on-ink-muted); }
.spears-tech-footer a[href^="tel:"] { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--lead); font-weight: 600; letter-spacing: -.01em; }
.spears-tech-footer__top > :last-child a:not([href^="tel:"]) { text-decoration: underline; text-decoration-color: var(--wp--preset--color--signal); text-decoration-thickness: 1.5px; text-underline-offset: .3em; }
.spears-tech-footer__top > :last-child a:not([href^="tel:"])::after { content: " \2192" / ""; color: var(--wp--preset--color--signal); }
@media (max-width: 599px) {
	.spears-tech-footer__top ul { gap: 0; }
	.spears-tech-footer__top li { padding-block: .375rem; }
	.spears-tech-footer__top li > a { display: inline-block; padding-block: .25rem; margin-block: -.25rem; }
}

/* Founder introduction: text leads on desktop with a portrait at a natural
   size; the portrait leads on phones and tablets. */
.sts-founder:has(> .sts-founder__body:first-child) { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.sts-founder > .sts-founder__body:first-child + .wp-block-image { justify-self: end; inline-size: 100%; max-inline-size: 28rem; }
@media (max-width: 781px) {
	.sts-founder:has(> .sts-founder__body:first-child) { grid-template-columns: 1fr; }
	.sts-founder > .sts-founder__body:first-child + .wp-block-image { order: -1; justify-self: start; max-inline-size: 26rem; }
	.sts-founder > .sts-founder__body:first-child + .wp-block-image img { aspect-ratio: 1; object-position: center 30%; }
}
/* Tablet header (600-1023px): the full link row does not fit beside the brand
   and CTA, so tablets use the same full-screen menu as phones. The toggle sits
   at the far right, as on mobile. */
@media (min-width: 600px) and (max-width: 1023px) {
	.spears-tech-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-grid; }
	.spears-tech-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.spears-tech-header .spears-tech-navigation { order: 2; }
	.spears-tech-header .spears-tech-header__cta { order: 1; }
	.spears-tech-header :has(> .spears-tech-header__cta) { gap: .75rem; }
}
/* Three-card sets: no orphaned card on tablets; one row of three from 960px. */
@media (min-width: 600px) and (max-width: 959px) {
	.sts-cards:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sts-cards > :nth-child(3):last-child { grid-column: 1 / -1; justify-self: center; inline-size: calc(50% - .625rem); }
}
@media (min-width: 960px) { .sts-cards:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }