/* Final viewport-fit layer shared by plugin pages. */
.sss-site .sss-logo { flex-shrink: 0; }
.sss-site .sss-logo__image { display: block; width: 180px; height: auto; max-width: none; }

/* Gold actions use dark ink; deeper gold supports white text on hover. */
.sss-site .sss-btn:not(.sss-btn--light) {
	border-color: var(--brand);
	background: linear-gradient(135deg, #d4b06a, var(--brand));
	color: var(--text-primary);
}
.sss-site .sss-btn:not(.sss-btn--light):hover {
	border-color: var(--action-hover);
	background: linear-gradient(135deg, var(--action), var(--action-hover));
	color: #fff;
}
/* Home FAQ: centered introduction above a compact, balanced question grid. */
.sss-site .sss-faq.sss-section { padding-block: clamp(46px, 5vw, 76px); }
.sss-site .sss-faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 36px); }
.sss-site .sss-faq__grid > div:first-child { text-align: center; }
.sss-site .sss-faq .sss-section-label { justify-content: center; }
.sss-site .sss-faq__grid > div > h2 { max-width: 760px; margin: 12px auto 0; font-size: clamp(1.7rem, 2.6vw, 2.7rem); }
.sss-site .sss-faq__grid > div > h2::after { margin: 16px auto 0; }
.sss-site .sss-faq .sss-accordion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
.sss-site .sss-faq .sss-accordion__column { display: grid; align-content: start; gap: 11px; min-width: 0; }
.sss-site .sss-faq .sss-accordion__item,
.sss-site .sss-faq .sss-accordion__item:last-child { min-width: 0; padding: 0; overflow: hidden; border: 1px solid #e9e0cc; border-radius: 13px; background: #fff; box-shadow: 0 6px 18px rgba(75, 62, 33, .04); }
.sss-site .sss-faq .sss-accordion__item:has(button[aria-expanded="true"]) { border-color: #dbc28a; box-shadow: 0 10px 24px rgba(114, 90, 38, .08); }
.sss-site .sss-faq .sss-accordion button { min-height: 58px; gap: 16px; padding: 14px 19px; font-size: clamp(.92rem, 1.05vw, 1rem); font-weight: 500; line-height: 1.4; }
.sss-site .sss-faq .sss-accordion button i { flex: 0 0 18px; }
.sss-site .sss-faq .sss-accordion__panel { padding: 0 19px 16px; font-size: .91rem; line-height: 1.6; }
.sss-site .sss-faq .sss-accordion__panel[hidden] { display: none; }
.sss-site .sss-faq .sss-accordion__panel p { margin: 0; }
@media (max-width: 680px) {
	.sss-site .sss-faq .sss-accordion { grid-template-columns: 1fr; gap: 11px; }
	.sss-site .sss-faq .sss-accordion button { min-height: 56px; padding: 13px 17px; }
	.sss-site .sss-faq .sss-accordion__panel { padding-inline: 17px; }
}

/* Site-only scrollbar: visible and calm on desktop, native where unsupported. */
html:has(> body.sss-site) { scrollbar-width: thin; scrollbar-color: #ab915b #f6f1e7; }
html:has(> body.sss-site)::-webkit-scrollbar { width: 11px; height: 11px; }
html:has(> body.sss-site)::-webkit-scrollbar-track { background: #f6f1e7; }
html:has(> body.sss-site)::-webkit-scrollbar-thumb {
	border: 2px solid #f6f1e7;
	border-radius: 999px;
	background: linear-gradient(180deg, #c0a365, #867040);
}
html:has(> body.sss-site)::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ab8c49, #6c582f); }
html:has(> body.sss-site)::-webkit-scrollbar-corner { background: #f6f1e7; }

@media (max-width: 768px) {
	html:has(> body.sss-site) { scrollbar-width: none; }
	html:has(> body.sss-site)::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}
}

/* Keep the brand and every desktop link on one row near the menu breakpoint. */
@media (min-width: 901px) and (max-width: 1150px) {
	.sss-header .sss-container { width: min(calc(100% - 36px), var(--container)); }
	.sss-header__inner { gap: 18px; }
	.sss-header .sss-logo { flex: 0 0 auto; }
	.sss-header .sss-nav { min-width: 0; gap: 14px; }
	.sss-header .sss-nav ul { gap: clamp(10px, 1.4vw, 16px); }
	.sss-header .sss-nav ul a { font-size: .82rem; white-space: nowrap; }
	.sss-header .sss-nav > .sss-btn { white-space: nowrap; }
}

@media (max-width: 900px) {
	.sss-header,
	.sss-header.is-scrolled { height: var(--header-h); backdrop-filter: none; }
	.sss-header__inner { position: relative; gap: 12px; }
	.sss-header .sss-logo { position: relative; z-index: 4; flex: 0 1 auto; min-width: 0; }
	.sss-header .sss-logo > span:last-child { min-width: 0; }
	.sss-header .sss-menu-toggle { position: relative; z-index: 4; flex: 0 0 44px; width: 44px; height: 44px; margin-left: auto; padding: 0; align-self: center; color: var(--text-primary); }
	.sss-header .sss-menu-toggle span:not(.sss-sr-only) { position: absolute; top: 50%; left: 50%; display: block; width: 20px; height: 2px; margin: 0; border-radius: 2px; transform-origin: center; transition: transform .25s ease; }
	.sss-header .sss-menu-toggle span:first-child { transform: translate(-50%, calc(-50% - 4px)); }
	.sss-header .sss-menu-toggle span:nth-child(2) { transform: translate(-50%, calc(-50% + 4px)); }
	.sss-header .sss-menu-toggle[aria-expanded="true"] span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
	.sss-header .sss-menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
	.sss-header .sss-nav {
		position: fixed;
		inset: var(--header-h) 0 0;
		z-index: 3;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 16px;
		width: 100%;
		min-height: 0;
		height: calc(100vh - var(--header-h));
		height: calc(100dvh - var(--header-h));
		padding: clamp(22px, 5vh, 42px) max(20px, env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-right));
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateY(-14px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		box-shadow: 0 20px 35px rgba(38, 31, 14, .12);
		transition: transform .25s ease, opacity .25s ease, visibility .25s ease;
	}
	.sss-header .sss-nav.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
	.sss-header .sss-nav > * { flex-shrink: 0; }
	.sss-header .sss-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; width: 100%; }
	.sss-header .sss-nav ul a { min-height: 54px; width: 100%; font-size: clamp(1.25rem, 3.3vw, 1.7rem); line-height: 1.2; }
	.sss-header .sss-nav > .sss-btn { align-self: flex-start; margin-top: 12px; }
}

@media (max-width: 600px) {
	.sss-header .sss-nav ul { grid-template-columns: 1fr; gap: 2px; }
	.sss-header .sss-nav ul a { min-height: 48px; font-size: clamp(1.2rem, 5.2vw, 1.5rem); }
	.sss-header .sss-nav { gap: 10px; }
}

@media (max-height: 540px) and (max-width: 900px) {
	.sss-header .sss-nav { padding-top: 14px; }
	.sss-header .sss-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sss-header .sss-nav ul a { min-height: 42px; font-size: 1.08rem; }
	.sss-header .sss-nav > .sss-btn { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.sss-header .sss-nav { transition: none; }
}

@media (min-width: 1600px) {
	:root { --container: 1360px; }
	.sss-site { font-size: 16px; }
	.sss-site { --type-page: 4.35rem; --type-section: 3.1rem; }
}

/* The home illustration stays alongside the copy on desktop, then reduces
   before it stacks so the opening does not consume two full tablet screens. */
@media (min-width: 641px) and (max-width: 900px) {
	.sss-launch-hero { padding-top: calc(var(--header-h) + 36px); padding-bottom: 48px; }
	.sss-launch-hero__grid { gap: 28px; }
	.sss-launch-art { width: min(100%, 440px); }
	.sss-launch-hero__foot { margin-top: 25px; }
}

@media (max-width: 640px) {
	.sss-launch-hero { padding-top: calc(var(--header-h) + 28px); padding-bottom: 36px; }
	.sss-launch-hero__grid { gap: 22px; }
	.sss-launch-hero__eyebrow { margin-bottom: 15px; }
	.sss-site .sss-launch-hero h1 { margin-bottom: 16px; }
	.sss-launch-hero__lead { margin-bottom: 19px; line-height: 1.6; }
	.sss-launch-hero__foot { margin-top: 18px; padding-top: 12px; }
	.sss-launch-art { width: min(100%, 310px); margin-inline: auto; }
	.sss-site .sss-section-label { font-size: .7rem; }
	.sss-service-panel__chips li { font-size: .78rem; }
}

@media (max-width: 380px) {
	.sss-launch-art { width: min(100%, 286px); }
	.sss-launch-art__chip { right: 2%; }
}

/* Preserve the original statistic grid and separators; only scale its type on phones. */
@media (max-width: 640px) {
	.sss-site .sss-stats strong {
		font-size: clamp(1.45rem, 7vw, 1.85rem);
		line-height: 1;
	}

	.sss-site .sss-stats span {
		font-size: clamp(.62rem, 2.7vw, .7rem);
		line-height: 1.35;
	}
}

.sss-site .sss-footer { padding: clamp(52px, 5vw, 76px) 0 24px; background: #1d180d; color: #f5efe2; }
.sss-site .sss-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, .7fr) minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(26px, 3.5vw, 54px);
	padding-bottom: clamp(42px, 4vw, 60px);
}
.sss-site .sss-footer__top > div { min-width: 0; gap: 11px; }
.sss-site .sss-footer__top > div:first-child p { max-width: 32ch; margin: 18px 0 0; }
.sss-site .sss-footer__label { margin-bottom: 8px; color: #dbb053; font-size: .7rem; font-weight: 750; letter-spacing: .12em; }
.sss-site .sss-footer__top a:not(.sss-logo) { color: #dcd3be; line-height: 1.5; overflow-wrap: anywhere; text-decoration: none; }
.sss-site .sss-footer__top a:not(.sss-logo):hover,
.sss-site .sss-footer__bottom a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.sss-site .sss-footer__top p { margin: 0; color: #c6bba3; line-height: 1.65; overflow-wrap: anywhere; }
.sss-site .sss-footer__bottom { align-items: center; gap: 14px; padding-top: 22px; border-color: rgba(208, 187, 142, .18); color: #baae92; font-size: .78rem; }
.sss-site .sss-footer__bottom span:last-child { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.sss-site .sss-footer__bottom a { color: #dcd3be; }

@media (max-width: 900px) {
	.sss-site .sss-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 48px; }
}

@media (max-width: 600px) {
	.sss-site .sss-footer { padding-top: 48px; }
	.sss-site .sss-footer__top { grid-template-columns: 1fr; gap: 26px; padding-bottom: 36px; }
	.sss-site .sss-footer__top > div { gap: 7px; }
	.sss-site .sss-footer__top > div:not(:first-child) { padding-top: 21px; border-top: 1px solid rgba(208, 187, 142, .13); }
	.sss-site .sss-footer__top > div:first-child p { margin-top: 12px; }
	.sss-site .sss-footer__bottom { align-items: flex-start; flex-direction: column; }
}

/* Unified responsive type scale. Desktop above 768px intentionally keeps its
   existing editorial sizing; tablet and phone sizes follow the site type guide. */
@media (min-width: 481px) and (max-width: 768px) {
	.sss-site {
		--type-page: clamp(2.35rem, 6vw, 3.6rem);
		--type-section: clamp(1.8rem, 4vw, 2.55rem);
		--type-feature: clamp(1.25rem, 2.86vw, 1.375rem);
		--type-card: clamp(1.25rem, 2.86vw, 1.375rem);
		--type-body: 1rem;
		--type-lead: 1rem;
		--type-label: clamp(.8125rem, 1.75vw, .875rem);
		--type-action: .9375rem;
		--type-page-line: 1.04;
	}
}

@media (max-width: 480px) {
	.sss-site {
		--type-page: clamp(2.1rem, 9.2vw, 3rem);
		--type-section: clamp(1.65rem, 7.2vw, 2.3rem);
		--type-feature: clamp(1.125rem, 5.2vw, 1.25rem);
		--type-card: clamp(1.125rem, 5.2vw, 1.25rem);
		--type-body: clamp(.9375rem, 4.15vw, 1rem);
		--type-lead: clamp(.9375rem, 4.15vw, 1rem);
		--type-label: clamp(.75rem, 3.4vw, .8125rem);
		--type-action: clamp(.875rem, 3.8vw, .9375rem);
		--type-page-line: 1.08;
	}
}

@media (max-width: 768px) {
	/* Semantic hierarchy shared by every plugin-owned page. */
	.sss-site main h1,
	.sss-site main section[class] h1,
	.sss-site :is(.sss-project-modal, .sss-not-found) h1 {
		font-size: var(--type-page);
		line-height: var(--type-page-line);
		overflow-wrap: anywhere;
	}

	.sss-site main h2,
	.sss-site main section[class] h2 { font-size: var(--type-section); line-height: 1.12; }
	.sss-site main h3,
	.sss-site main section[class] h3 { font-size: var(--type-feature); line-height: 1.22; }

	/* Card and article titles are minor headings even where the HTML uses h2. */
	.sss-site :is(.sss-service-panel, .sss-project-card__body, .sss-case-content article, .sss-legal article, .sss-project-modal) h2,
	.sss-site main section[class] :is(.sss-service-panel, .sss-project-card__body, .sss-case-content article, .sss-legal article) h2,
	.sss-site .sss-work-panel h3 {
		font-size: var(--type-feature);
		line-height: 1.13;
	}

	/* Body copy, controls, and long-form content use the 15–16px reading scale. */
	.sss-site main p:not(:where(.sss-eyebrow, .sss-section-label, .sss-mini-label, .sss-kicker)),
	.sss-site main section[class] p:not(:where(.sss-eyebrow, .sss-section-label, .sss-mini-label, .sss-kicker)),
	.sss-site :is(.sss-accordion button, .sss-accordion__panel, .sss-project-modal p),
	.sss-site :is(input, select, textarea) {
		font-size: var(--type-body);
		line-height: 1.65;
	}

	.sss-site :is(.sss-btn, .sss-btn--small, .sss-text-link, .sss-filter button),
	.sss-site main section[class] :is(.sss-btn, .sss-btn--small, .sss-text-link, .sss-filter button) {
		font-size: var(--type-action);
		line-height: 1.2;
	}

	/* Labels and supporting metadata use the 12–14px caption scale. */
	.sss-site :is(.sss-section-label, .sss-mini-label, .sss-eyebrow, .sss-about-kicker, .sss-launch-hero__eyebrow, .sss-kicker, .sss-footer__label),
	.sss-site :is(.sss-tags li, .sss-project-card__visual > span, .sss-project-card__body > p, .sss-work-panel__result > span),
	.sss-site main section[class] :is(.sss-section-label, .sss-mini-label, .sss-eyebrow, .sss-about-kicker, .sss-launch-hero__eyebrow, .sss-kicker),
	.sss-site main section[class] :is(.sss-tags li, .sss-project-card__visual > span, .sss-project-card__body > p, .sss-work-panel__result > span),
	.sss-site :is(.sss-form-section label, .sss-footer__bottom) {
		font-size: var(--type-label);
		line-height: 1.35;
	}

	.sss-header .sss-nav ul a { font-size: var(--type-feature); }
	.sss-site .sss-footer__top :is(p, a:not(.sss-logo)) { font-size: var(--type-body); }
	.sss-site .sss-footer__bottom :is(a, span) { font-size: var(--type-label); }
}

@media (max-width: 480px) {
	/* The Work page preserves its two-column mobile gallery, so its preview copy
	   uses the small-text range while the page and section headings follow above. */
	.sss-site .sss-page-work .sss-project-card__body h2 {
		font-size: clamp(1rem, 4.6vw, 1.125rem);
		line-height: 1.17;
	}
	.sss-site .sss-page-work .sss-project-card--featured .sss-project-card__body h2 {
		font-size: clamp(1.0625rem, 4.8vw, 1.1875rem);
	}
	.sss-site .sss-page-work .sss-project-card__body > p,
	.sss-site .sss-page-work .sss-project-card__body > div {
		font-size: var(--type-label);
		line-height: 1.4;
	}
}

/* Section titles fill the available row before wrapping. This avoids the short,
   artificially balanced lines that left usable horizontal space empty. */
.sss-site :is(
	.sss-heading-row,
	.sss-capabilities__heading,
	.sss-work-stack__heading,
	.sss-client-reviews__heading,
	.sss-about-section-intro
) h2,
.sss-site :is(
	.sss-faq__grid,
	.sss-intro__grid,
	.sss-editorial__grid,
	.sss-detail-intro__grid
) h2 {
	max-width: none;
	text-wrap: wrap;
	word-break: normal;
}

.sss-site .sss-heading-row > div:first-child {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
}

@media (max-width: 640px) {
	.sss-site .sss-heading-row > div:first-child { width: 100%; }
}
/* Keep the footer reachable above phone browser controls and home indicators. */
@media (max-width:900px) {
 .sss-site:not(.sss-menu-open):not(.sss-modal-open) { overflow-x:clip; overflow-y:visible; }
 .sss-site .sss-footer { padding-bottom:calc(48px + env(safe-area-inset-bottom, 0px)); }
}