/* ==========================================================================
   Smart & Wild — main stylesheet
   Source of truth: Claude Design project "Smart & Wild — Website"
   (System · Foundations, System · Components, page artboards).
   Desktop values = 1440 artboards, mobile values = 390 artboards; sizes interpolate
   fluidly between them, layout switches at 768 / 1024 / 1280.
   ========================================================================== */

/* --------------------------------------------------------------------------
   F1 Colour · F2 Type · F3 Grid & spacing — tokens (mirrors theme.json)
   -------------------------------------------------------------------------- */
:root {
	--sw-blue: #3936D8;
	--sw-blue-700: #2B28B5;
	--sw-blue-100: #E6E6FA;
	--sw-ink: #101010;
	--sw-ink-2: #1C1C1B;
	--sw-paper: #FFFFFF;
	--sw-stone: #F5F5F3;
	--sw-stone-2: #ECECE7;
	--sw-line: #D9D9D3;
	--sw-grey: #5C5C57;
	--sw-grey-2: #8A8A84;
	--sw-grey-dk: #A3A39D;
	--sw-yellow: #FFD21C;
	--sw-pink: #E987E8;
	--sw-violet: #7947E9;
	--sw-error: #C8321E;

	--sw-font: 'Onest', 'Helvetica Neue', Arial, sans-serif;
	--sw-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

	/* fluid scale: value at 390 → value at 1440 */
	--fs-display: clamp(50px, calc(50px + (100vw - 390px) * .051429), 104px);
	--fs-h1: clamp(44px, calc(44px + (100vw - 390px) * .041905), 88px);
	--fs-h2: clamp(38px, calc(38px + (100vw - 390px) * .024762), 64px);
	--fs-h3: clamp(26px, calc(26px + (100vw - 390px) * .013333), 40px);
	--fs-h4: clamp(21px, calc(21px + (100vw - 390px) * .006667), 28px);
	--fs-lead: clamp(17px, calc(17px + (100vw - 390px) * .002857), 20px);
	--fs-body: clamp(16px, calc(16px + (100vw - 390px) * .000952), 17px);
	--fs-small: 14px;
	--fs-mono: clamp(11px, calc(11px + (100vw - 390px) * .000952), 12px);
	--fs-tag: clamp(10px, calc(10px + (100vw - 390px) * .000952), 11px);
	--fs-cta: clamp(54px, calc(54px + (100vw - 390px) * .070476), 128px);

	--sw-max: 1440px;
	--sw-margin: 20px;
	--sw-gutter: 12px;
	--sw-sec-t: 72px;
	--sw-sec-b: 64px;
	--sw-header-h: 64px;
	--sw-radius: 2px;
}

@media (min-width: 768px) {
	:root { --sw-margin: 32px; --sw-gutter: 20px; --sw-sec-t: 96px; --sw-sec-b: 88px; }
}

@media (min-width: 1024px) {
	:root { --sw-header-h: 72px; }
}

@media (min-width: 1280px) {
	:root { --sw-margin: 48px; --sw-gutter: 24px; --sw-sec-t: 136px; --sw-sec-b: 120px; }
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }

body {
	margin: 0;
	background: var(--sw-paper);
	color: var(--sw-ink);
	font-family: var(--sw-font);
	font-size: var(--fs-body);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg, video { max-width: 100%; }
img { height: auto; display: block; }
button { font: inherit; color: inherit; }
button, [role="button"] { cursor: pointer; }
strong, b { font-weight: 700; }

.px { shape-rendering: crispEdges; flex-shrink: 0; display: block; }

:focus-visible { outline: 2px solid var(--sw-blue); outline-offset: 3px; }
.is-ink :focus-visible, .is-blue :focus-visible, .sw-header--blue :focus-visible, .sw-menu :focus-visible { outline-color: var(--sw-yellow); }

.screen-reader-text, .sw-sr {
	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;
}
.screen-reader-text:focus { clip: auto !important; clip-path: none; height: auto; width: auto; z-index: 100000;
	background: var(--sw-yellow); color: var(--sw-ink); padding: 12px 16px; left: 8px; top: 8px; font-weight: 600; }

/* --------------------------------------------------------------------------
   Surfaces (F1 page balance)
   -------------------------------------------------------------------------- */
.is-paper { background-color: var(--sw-paper); color: var(--sw-ink); }
.is-stone { background-color: var(--sw-stone); color: var(--sw-ink); }
.is-ink { background-color: var(--sw-ink); color: var(--sw-paper); }
.is-blue { background-color: var(--sw-blue); color: var(--sw-paper); }
.is-blue-grid {
	background-color: var(--sw-blue);
	color: var(--sw-paper);
	background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
	background-size: 35px 35px;
	background-position: var(--sw-margin) 0;
}
@media (min-width: 768px) {
	.is-blue-grid { background-size: 48px 48px; }
}

/* --------------------------------------------------------------------------
   Layout: container, 12-column grid, sections
   -------------------------------------------------------------------------- */
.sw-wrap { width: 100%; max-width: var(--sw-max); margin-inline: auto; padding-inline: var(--sw-margin); }

.sw-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sw-gutter); }

.sw-section { padding-block: var(--pt, var(--sw-sec-t)) var(--pb, var(--sw-sec-b)); }

/* Sections that sit edge-to-edge but keep content on the 1440 grid */
.sw-section > .sw-wrap { padding-block: 0; }

.sw-page { display: flex; flex-direction: column; min-height: 100vh; }
.sw-main { flex: 1 0 auto; }

/* --------------------------------------------------------------------------
   Typography (F2)
   -------------------------------------------------------------------------- */
.t-display { font-size: var(--fs-display); line-height: .96; letter-spacing: -.045em; font-weight: 700; }
.t-h1 { font-size: var(--fs-h1); line-height: .95; letter-spacing: -.04em; font-weight: 700; }
.t-h2 { font-size: var(--fs-h2); line-height: 1; letter-spacing: -.035em; font-weight: 700; }
.t-h3 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.02em; font-weight: 700; }
.t-h4 { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -.015em; font-weight: 700; }
.t-lead { font-size: var(--fs-lead); line-height: 1.5; letter-spacing: -.005em; text-wrap: pretty; }
.t-body { font-size: var(--fs-body); line-height: 1.55; text-wrap: pretty; }
.t-small { font-size: var(--fs-small); line-height: 1.5; text-wrap: pretty; }
@media (min-width: 1024px) {
	.t-display { line-height: .94; }
	.t-h3 { line-height: 1.05; }
	.t-h4 { line-height: 1.15; }
}

.mono {
	font-family: var(--sw-mono);
	font-size: var(--fs-mono);
	line-height: 15px;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 500;
}
@media (min-width: 1024px) { .mono { line-height: 16px; } }

.cap {
	font-family: var(--sw-mono);
	font-size: var(--fs-tag);
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 500;
}

.c-grey { color: var(--sw-grey); }
.c-grey-dk, .is-ink .c-grey, .is-ink .c-muted { color: var(--sw-grey-dk); }
.is-blue .c-grey, .is-blue .c-muted { color: rgba(255,255,255,.9); }
.c-muted { color: var(--sw-grey); }
.c-blue { color: var(--sw-blue); }
.c-violet { color: var(--sw-violet); }
.c-pink { color: var(--sw-pink); }
.c-yellow { color: var(--sw-yellow); }

/* Two-tone statement: grey lead-in + ink emphasis (About · Service positioning) */
.sw-twotone { color: var(--sw-grey-2); }
.sw-twotone strong, .sw-twotone b { color: var(--sw-ink); font-weight: inherit; }

/* --------------------------------------------------------------------------
   C3 Labels — "index / name", marker square
   -------------------------------------------------------------------------- */
.sw-label { display: inline-flex; align-items: center; gap: 8px; color: var(--sw-blue); }
.sw-label i { display: block; width: 7px; height: 7px; background: var(--sw-violet); flex-shrink: 0; }
@media (min-width: 1024px) {
	.sw-label { gap: 10px; }
	.sw-label i { width: 8px; height: 8px; }
}
.is-ink .sw-label, .is-blue .sw-label, .is-blue-grid .sw-label, .sw-label--dark { color: var(--sw-yellow); }
.is-ink .sw-label i, .is-blue .sw-label i, .is-blue-grid .sw-label i, .sw-label--dark i { background: var(--sw-pink); }

/* Industry label — neutral with violet outlined square */
.sw-ind { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--sw-grey); }
.sw-ind i { display: block; width: 6px; height: 6px; box-shadow: inset 0 0 0 1.5px var(--sw-violet); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   C3 Tags — filled / service / technology / industry / inverse
   -------------------------------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
	display: inline-flex; align-items: center; height: 26px; padding: 0 8px;
	border: 1px solid rgba(16,16,16,.28);
	font-family: var(--sw-mono); font-size: var(--fs-tag); letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
	white-space: nowrap; color: inherit;
}
@media (min-width: 768px) { .tag { height: 28px; padding: 0 10px; } }
.tag--svc::before, .tag--tech::before { content: ''; display: block; width: 6px; height: 6px; margin-right: 8px; flex-shrink: 0; }
.tag--svc::before { background: var(--sw-blue); }
.tag--tech { color: var(--sw-violet); border-color: rgba(121,71,233,.5); }
.tag--tech::before { background: var(--sw-violet); }
.tag--fill { background: var(--sw-blue); border-color: var(--sw-blue); color: #fff; }
.tag--ink { background: var(--sw-ink); border-color: var(--sw-ink); color: #fff; }
.tag--new { background: var(--sw-yellow); border-color: var(--sw-yellow); color: var(--sw-ink); }
a.tag:hover, .tag.is-link:hover { border-color: var(--sw-violet); }

/* inverse (on ink / blue): every marker turns pink */
.is-ink .tag, .is-blue .tag, .tags--inv .tag { border-color: rgba(255,255,255,.4); color: #fff; }
.is-ink .tag--svc::before, .is-blue .tag--svc::before, .is-ink .tag--tech::before, .is-blue .tag--tech::before,
.tags--inv .tag--svc::before, .tags--inv .tag--tech::before { background: var(--sw-pink); }
.is-ink a.tag:hover, .is-blue a.tag:hover { border-color: var(--sw-pink); }

/* --------------------------------------------------------------------------
   C2 Buttons — one primary action everywhere
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: stretch; height: 56px;
	font-family: var(--sw-font); font-size: 16px; font-weight: 600; letter-spacing: -.005em; line-height: 1;
	border: 0; border-radius: var(--sw-radius); overflow: hidden; white-space: nowrap; padding: 0;
	background: none; color: inherit; text-align: left;
}
.btn .b-txt { display: flex; align-items: center; padding: 0 24px; }
.btn .b-ico { display: flex; align-items: center; justify-content: center; width: 56px; flex-shrink: 0; }

.btn--primary { background: var(--sw-ink); color: #fff; }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--sw-blue); color: #fff; }
.btn--primary .b-ico { background: var(--sw-yellow); color: var(--sw-ink); }

/* on blue: stays ink, hover turns paper */
.is-blue .btn--primary:hover, .is-blue-grid .btn--primary:hover { background: #fff; color: var(--sw-ink); }
/* on ink: paper primary, hover blue */
.btn--paper { background: #fff; color: var(--sw-ink); }
.btn--paper:hover, .btn--paper:focus-visible { background: var(--sw-blue); color: #fff; }
.btn--blue { background: var(--sw-blue); color: #fff; }
.btn--blue:hover { background: #fff; color: var(--sw-ink); }

.btn--secondary { box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--secondary .b-ico { box-shadow: inset 1.5px 0 0 currentColor; }
.btn--secondary:hover { background: var(--sw-ink); color: #fff; box-shadow: inset 0 0 0 1.5px var(--sw-ink); }
.btn--secondary:hover .b-ico { box-shadow: inset 1.5px 0 0 #fff; }
.is-blue .btn--secondary:hover, .is-blue-grid .btn--secondary:hover { background: #fff; color: var(--sw-blue); box-shadow: none; }
.is-ink .btn--secondary:hover { background: #fff; color: var(--sw-ink); box-shadow: none; }
.is-blue .btn--secondary:hover .b-ico, .is-ink .btn--secondary:hover .b-ico { box-shadow: inset 1.5px 0 0 currentColor; }

.btn--sm { height: 44px; font-size: 15px; }
.btn--sm .b-txt { padding: 0 18px; }
.btn--sm .b-ico { width: 44px; }

.btn[disabled], .btn.is-disabled { background: var(--sw-stone-2); color: var(--sw-grey-2); pointer-events: none; }
.btn[disabled] .b-ico, .btn.is-disabled .b-ico { background: transparent; box-shadow: inset 1px 0 0 var(--sw-line); color: var(--sw-grey-2); }

.is-blue .btn:focus-visible, .is-ink .btn:focus-visible, .is-blue-grid .btn:focus-visible { outline-color: var(--sw-yellow); }

.btns { display: flex; flex-wrap: wrap; gap: 16px; }

/* mobile: 52px full-width */
@media (max-width: 767px) {
	.btn:not(.btn--sm):not(.btn--inline) { display: flex; width: 100%; height: 52px; }
	.btn:not(.btn--sm):not(.btn--inline) .b-txt { flex-grow: 1; padding: 0 20px; }
	.btn:not(.btn--sm):not(.btn--inline) .b-ico { width: 52px; }
	.btns { flex-direction: column; gap: 10px; }
}

/* Text link: underline turns pink on hover */
.sw-link {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 16px; font-weight: 600; line-height: 1.3; padding-bottom: 6px;
	box-shadow: inset 0 -1.5px 0 currentColor; white-space: nowrap; align-self: flex-start;
	transition: box-shadow .15s ease;
}
.sw-link:hover, .sw-link:focus-visible { box-shadow: inset 0 -1.5px 0 var(--sw-pink); }
.sw-link--wrap { white-space: normal; }

/* Big email link (CTA, contact) */
.sw-email { font-weight: 600; letter-spacing: -.02em; box-shadow: inset 0 -2px 0 currentColor; padding-bottom: 3px; align-self: flex-start; word-break: break-word; }
.is-blue .sw-email, .is-blue-grid .sw-email, .is-ink .sw-email, .sw-email--y { box-shadow: inset 0 -2px 0 var(--sw-yellow); }
.sw-email:hover { box-shadow: inset 0 -2px 0 var(--sw-pink); }

/* --------------------------------------------------------------------------
   Micro-navigation: breadcrumb, pagination dashes, language segments
   -------------------------------------------------------------------------- */
.sw-crumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--sw-grey); }
.sw-crumbs .sep { color: var(--sw-violet); }
.sw-crumbs [aria-current] { color: var(--sw-ink); }
.sw-crumbs a:hover { color: var(--sw-ink); box-shadow: inset 0 -1px 0 var(--sw-pink); }
@media (min-width: 1024px) { .sw-crumbs { gap: 10px; } }

.sw-dashes { display: flex; gap: 4px; }
.sw-dashes span { width: 20px; height: 4px; background: var(--sw-line); }
.sw-dashes span.is-on { background: var(--sw-violet); }
@media (min-width: 1024px) { .sw-dashes span { width: 24px; } }

.sw-langs { display: flex; gap: 4px; }
.sw-langs a { padding: 6px 8px; color: var(--sw-grey); }
.sw-langs a[aria-current] { background: var(--sw-blue); color: #fff; }
.sw-langs a:not([aria-current]):hover { color: var(--sw-ink); box-shadow: inset 0 -2px 0 var(--sw-pink); }
.sw-langs--dark a { color: var(--sw-grey-dk); }
.sw-langs--dark a[aria-current] { background: var(--sw-pink); color: var(--sw-ink); }
.sw-langs--dark a:not([aria-current]):hover { color: #fff; }

/* --------------------------------------------------------------------------
   Section head: label / headline / aside (shared by almost every section)
   -------------------------------------------------------------------------- */
.sw-head { display: flex; flex-direction: column; gap: 20px; }
.sw-head__label { order: 0; }
.sw-head__title { order: 1; }
.sw-head__aside { order: 2; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.sw-head__aside:empty { display: none; }
@media (min-width: 1024px) {
	.sw-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sw-gutter); row-gap: 32px; align-items: end; }
	.sw-head__label { grid-column: 1 / -1; }
	.sw-head__title { grid-column: 1 / span 7; }
	.sw-head__aside { grid-column: 9 / span 4; }
	.sw-head__aside--end { align-items: flex-end; }
	.sw-head--wide .sw-head__title { grid-column: 1 / span 8; }
	.sw-head--narrow .sw-head__title { grid-column: 1 / span 6; }
}

/* Mobile headline <br> handling: design breaks lines on desktop only */
@media (max-width: 1023px) { .br-lg { display: none; } }

/* --------------------------------------------------------------------------
   Pixel furniture
   -------------------------------------------------------------------------- */
.sw-mark2 { position: absolute; width: 7px; height: 7px; background: var(--sw-pink); pointer-events: none; }
@media (min-width: 1024px) { .sw-mark2 { width: 8px; height: 8px; } }

.sw-smile {
	--s: var(--s-sm, 64px); --u: var(--u-sm, 4px); --m: var(--m-sm, 7px);
	position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: var(--s); height: var(--s); background: var(--sw-yellow); color: var(--sw-ink);
}
.sw-smile__ico { width: calc(var(--u) * 7); height: calc(var(--u) * 6); }
.sw-smile::before, .sw-smile::after {
	content: ''; position: absolute; width: var(--m); height: var(--m); background: var(--sw-pink);
	left: calc(var(--m) * -2); bottom: calc(var(--m) * -2);
}
.sw-smile::after { left: calc(var(--m) * -3); bottom: calc(var(--m) * -3); }
@media (min-width: 1024px) {
	.sw-smile { --s: var(--s-lg, 144px); --u: var(--u-lg, 10px); --m: var(--m-lg, 12px); }
}

/* Pixel grid panel (hero compositions) */
.sw-pxpanel {
	position: relative; overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
	background-color: #3431CF;
	background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
}

/* --------------------------------------------------------------------------
   Control squares (accordion / row arrows) — C6 F
   -------------------------------------------------------------------------- */
.sw-ctl {
	width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	box-shadow: inset 0 0 0 1.5px currentColor; color: var(--sw-ink);
}
.sw-ctl--48 { width: 48px; height: 48px; }
.sw-ctl.is-open, [aria-expanded="true"] > .sw-ctl { background: var(--sw-yellow); box-shadow: none; color: var(--sw-ink); }
a:hover > .sw-ctl:not(.is-open), button:hover > .sw-ctl:not(.is-open) { box-shadow: inset 0 0 0 1.5px var(--sw-violet); color: var(--sw-violet); }

/* --------------------------------------------------------------------------
   Rich text (legal pages, default page template, case-study text)
   -------------------------------------------------------------------------- */
.sw-prose { font-size: var(--fs-body); line-height: 1.6; max-width: 720px; }
.sw-prose > * + * { margin-top: 1em; }
.sw-prose h2 { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -.015em; margin-top: 2em; }
.sw-prose h3 { font-size: 20px; line-height: 1.3; margin-top: 1.6em; }
.sw-prose ul, .sw-prose ol { padding-left: 1.2em; }
.sw-prose ul { list-style: square; }
.sw-prose ol { list-style: decimal; }
.sw-prose li::marker { color: var(--sw-blue); }
.sw-prose a { box-shadow: inset 0 -1px 0 currentColor; }
.sw-prose a:hover { box-shadow: inset 0 -1px 0 var(--sw-pink); }
.sw-prose img { margin-block: 32px; }
.sw-prose blockquote { font-size: var(--fs-h4); font-weight: 500; letter-spacing: -.015em; line-height: 1.35; padding-left: 20px; box-shadow: inset 3px 0 0 var(--sw-blue); }

/* ==========================================================================
   C1 Header & navigation
   ========================================================================== */
.sw-header {
	position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 60;
	background: var(--sw-paper); color: var(--sw-ink);
	box-shadow: inset 0 -1px 0 var(--sw-ink);
	transition: background-color .2s ease, box-shadow .2s ease;
}
.sw-header__bar { height: var(--sw-header-h); display: flex; align-items: center; justify-content: space-between; }
.sw-header__logo { display: flex; align-items: center; }
.sw-logo { height: 26px; width: auto; display: block; }
.sw-header .sw-logo--light { display: none; }
.sw-header__nav, .sw-header__actions { display: none; }

.sw-header__menu {
	width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
	border: 0; background: none; box-shadow: inset 0 0 0 1.5px currentColor; color: inherit; padding: 0;
}
.sw-header__menu:hover { box-shadow: inset 0 0 0 1.5px var(--sw-pink); }

/* A · on blue (home) — until scrolled */
.sw-header--blue:not(.is-stuck) { background: var(--sw-blue); color: #fff; box-shadow: inset 0 -1px 0 rgba(255,255,255,.2); }
.sw-header--blue:not(.is-stuck) .sw-logo--dark { display: none; }
.sw-header--blue:not(.is-stuck) .sw-logo--light { display: block; }

@media (min-width: 1024px) {
	.sw-header__bar {
		display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sw-gutter);
	}
	.sw-header__logo { grid-column: 1 / span 3; }
	.sw-logo { height: 30px; }
	.sw-header__nav { grid-column: 5 / span 4; display: flex; gap: 36px; align-items: center; }
	.sw-header__actions { grid-column: 9 / span 4; display: flex; justify-content: flex-end; align-items: center; gap: 24px; }
	.sw-header__menu { display: none; }
	.sw-header--blue:not(.is-stuck) .sw-header__bar { height: 88px; }
	.sw-header--blue:not(.is-stuck) .sw-logo { height: 34px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
	.sw-header__nav { grid-column: 4 / span 5; gap: 28px; }
	.sw-header__logo { grid-column: 1 / span 3; }
}

.sw-nav a { font-size: 16px; font-weight: 500; line-height: 1.3; padding-bottom: 4px; }
.sw-nav a:hover { box-shadow: inset 0 -2px 0 var(--sw-pink); }
.sw-nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--sw-blue); }
.sw-header--blue:not(.is-stuck) .sw-nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--sw-pink); }

/* Language switcher */
.sw-lang { position: relative; }
.sw-lang__btn {
	background: none; border: 0; color: inherit; display: flex; align-items: center; gap: 8px;
	height: 44px; padding: 0 4px; font-family: var(--sw-mono);
}
.sw-lang__btn:hover { box-shadow: inset 0 -2px 0 var(--sw-pink); }
.sw-lang__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.sw-lang__menu {
	position: absolute; top: calc(100% + 6px); right: 0; z-index: 5;
	background: var(--sw-paper); padding: 4px; box-shadow: inset 0 0 0 1px var(--sw-line), 0 12px 24px rgba(16,16,16,.12);
}
.sw-lang__menu.sw-langs--dark { background: var(--sw-ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.sw-lang--up .sw-lang__menu { top: auto; bottom: calc(100% + 6px); }
.sw-lang__menu[hidden] { display: none; }

/* ==========================================================================
   Mobile navigation · open
   ========================================================================== */
.sw-menu {
	position: fixed; inset: 0; z-index: 100; background: var(--sw-ink); color: #fff;
	display: flex; flex-direction: column; overflow-y: auto;
}
.sw-menu[hidden] { display: none; }
.admin-bar .sw-menu { top: var(--wp-admin--admin-bar--height, 0px); }
.sw-menu__bar {
	height: 64px; padding: 0 var(--sw-margin); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
	box-shadow: inset 0 -1px 0 rgba(255,255,255,.16);
}
.sw-menu__close { width: 44px; height: 44px; background: var(--sw-yellow); border: 0; display: flex; align-items: center; justify-content: center; padding: 0; }
.sw-menu__nav { padding: 32px var(--sw-margin) 0; display: flex; flex-direction: column; }
.sw-menu__item {
	display: flex; align-items: baseline; gap: 14px; padding: 14px 0;
	box-shadow: inset 0 -1px 0 rgba(255,255,255,.16);
	font-size: 44px; line-height: 1; letter-spacing: -.04em; font-weight: 700;
}
.sw-menu__item .mono { color: var(--sw-yellow); }
.sw-menu__item:hover .mono { color: var(--sw-pink); }
.sw-menu__mark { margin-left: auto; align-self: center; width: 14px; height: 14px; position: relative; flex-shrink: 0; }
.sw-menu__mark i { position: absolute; width: 7px; height: 7px; }
.sw-menu__mark i:first-child { left: 0; top: 0; background: var(--sw-pink); }
.sw-menu__mark i:last-child { left: 7px; top: 7px; background: var(--sw-violet); }
.sw-menu__cta { padding: 28px var(--sw-margin) 0; }
.sw-menu__cta .btn { display: flex; width: 100%; height: 52px; }
.sw-menu__cta .btn .b-txt { flex-grow: 1; padding: 0 20px; }
.sw-menu__cta .btn .b-ico { width: 52px; }
.sw-menu__foot { margin-top: auto; padding: 40px var(--sw-margin) 28px; display: flex; flex-direction: column; gap: 20px; }
.sw-menu__mail { display: flex; flex-direction: column; gap: 8px; }
.sw-menu__mail .mono { color: var(--sw-grey-dk); }
.sw-menu__mail a { font-size: 20px; font-weight: 600; }
.sw-menu__meta { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.16); color: var(--sw-grey-dk); }
.sw-menu__social { display: flex; gap: 18px; }
.sw-menu__social a:hover { color: #fff; }
@media (min-width: 1024px) { .sw-menu { display: none !important; } }
body.sw-menu-open { overflow: hidden; }

/* ==========================================================================
   Footer
   ========================================================================== */
.sw-footer { padding: 56px 0 28px; }
.sw-footer__top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
.sw-footer__brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; }
.sw-footer__brand .sw-logo { height: 32px; align-self: flex-start; }
.sw-footer__col { display: flex; flex-direction: column; gap: 12px; }
.sw-footer__col .mono { margin-bottom: 4px; }
.sw-footer__col a { font-size: 17px; line-height: 1.2; align-self: flex-start; }
.sw-footer__col a:hover, .sw-footer__col a[aria-current] { color: var(--sw-pink); }
.sw-footer__cta { display: none; }
.sw-footer__email-full { display: none; }
.sw-footer__bottom {
	margin-top: 40px; padding-top: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 24px; color: var(--sw-grey-dk);
}
.sw-footer__legal { order: -1; width: 100%; display: flex; gap: 20px; flex-wrap: wrap; }
.sw-footer__legal a:hover, .sw-footer__tools a:hover { color: #fff; }
.sw-footer__tools { display: flex; gap: 28px; align-items: center; }
.sw-footer__top-link { display: none; gap: 8px; align-items: center; }
.sw-footer .sw-lang__btn { height: auto; padding: 0; color: var(--sw-grey-dk); }

@media (min-width: 768px) {
	.sw-footer { padding: 80px 0 32px; }
	.sw-footer__top { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sw-gutter); align-items: start; }
	.sw-footer__brand { grid-column: 1 / span 4; gap: 18px; }
	.sw-footer__brand .sw-logo { height: 40px; }
	.sw-footer__studio { grid-column: 6 / span 2; }
	.sw-footer__connect { grid-column: 8 / span 2; }
	.sw-footer__col .mono { margin-bottom: 8px; }
	.sw-footer__cta { grid-column: 10 / span 3; display: flex; flex-direction: column; gap: 20px; align-items: flex-end; }
	.sw-footer__email-full { display: inline; }
	.sw-footer__email-short { display: none; }
	.sw-footer__bottom { margin-top: 96px; padding-top: 24px; flex-wrap: nowrap; align-items: center; }
	.sw-footer__legal { order: 0; width: auto; gap: 28px; }
	.sw-footer__top-link { display: flex; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.sw-footer__brand { grid-column: 1 / -1; }
	.sw-footer__studio { grid-column: 1 / span 3; }
	.sw-footer__connect { grid-column: 4 / span 4; }
	.sw-footer__cta { grid-column: 8 / span 5; }
}

/* Responsive visibility utilities (mobile artboards sometimes drop secondary copy) */
@media (max-width: 767px) { .hide-sm { display: none !important; } }
@media (min-width: 768px) { .show-sm { display: none !important; } }
@media (max-width: 1023px) { .hide-md { display: none !important; } }
@media (min-width: 1024px) { .show-md { display: none !important; } }

/* ==========================================================================
   Service hero panels (Service template · T3 "One pixel composition per service")
   Same frame, grid and size for all six services.
   ========================================================================== */
.sw-panel {
	position: relative; overflow: hidden; height: 252px; color: #fff;
	background-color: var(--sw-blue);
	background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
	background-size: 28px 28px; background-position: 7px 0;
}
.sw-panel__code, .sw-panel__meta { position: absolute; top: 10px; color: rgba(255,255,255,.72); z-index: 2; }
.sw-panel__code { left: 12px; }
.sw-panel__meta { right: 12px; display: none; }
.sw-panel__mark { position: absolute; width: 7px; height: 7px; background: var(--sw-pink); z-index: 2; }
.sw-panel__mark--1 { right: 19px; top: 14px; }
.sw-panel__mark--2 { right: 12px; top: 21px; }
.sw-panel__words { display: none; }
.sw-panel .sw-cv { z-index: 1; }
@media (min-width: 1024px) {
	.sw-panel { height: 476px; background-size: 34px 34px; background-position: 12px 0; }
	.sw-panel__code { left: 16px; top: 16px; }
	.sw-panel__meta { display: block; right: 16px; top: 16px; }
	.sw-panel__mark { width: 8px; height: 8px; }
	.sw-panel__mark--1 { right: 24px; top: 44px; }
	.sw-panel__mark--2 { right: 16px; top: 52px; }
	.sw-panel__words { display: flex; justify-content: space-between; position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; }
	.sw-panel__slash { opacity: .5; }
}

/* ==========================================================================
   C5 Project cards — featured, medium, compact, archive row + visuals
   ========================================================================== */
.sw-visual {
	position: relative; overflow: hidden; background: var(--sw-visual-bg, var(--sw-stone-2));
	display: flex; align-items: center; justify-content: center;
}
.sw-visual__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sw-visual__name { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--sw-ink); padding: 16px; text-align: center; }
.sw-visual__label { position: absolute; left: 14px; top: 14px; font-size: 10px; color: rgba(255,255,255,.65); z-index: 1; }
.sw-visual--featured { height: 380px; }
.sw-visual--medium, .sw-visual--related { height: 280px; }
.sw-visual--compact { height: 300px; }
.sw-visual--carousel { height: 220px; }
.sw-visual--split { height: 380px; }
@media (min-width: 768px) {
	.sw-visual--featured { height: clamp(420px, 44.44vw, 640px); }
	.sw-visual--medium { height: clamp(380px, 37.5vw, 540px); }
	.sw-visual--related { height: clamp(360px, 33.33vw, 480px); }
	.sw-visual--split { height: clamp(460px, 43vw, 620px); }
}
.sw-visual > .sw-cv { position: absolute; inset: 0; }

/* A · featured (stacked) */
.sw-card-f { display: flex; flex-direction: column; gap: 16px; }
.sw-card-f__meta { display: flex; flex-direction: column; gap: 16px; }
.sw-card-f__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.sw-card-f__summary { font-size: var(--fs-body); line-height: 1.55; }
.sw-card-f__dl, .sw-card-f__link { display: none; }
.sw-card-f__end { display: contents; }
.sw-card-f:hover .sw-card-f__link { box-shadow: inset 0 -1.5px 0 var(--sw-pink); }
.sw-card-f:hover h3 { box-shadow: inset 0 -2px 0 var(--sw-pink); display: inline; }
@media (min-width: 1024px) {
	.sw-card-f { gap: 0; }
	.sw-card-f__meta {
		display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sw-gutter);
		row-gap: 12px; padding-top: 32px; align-items: start; grid-template-rows: auto 1fr;
	}
	.sw-card-f__head { grid-column: 1 / span 6; grid-row: 1; }
	.sw-card-f__ind { display: none; }
	.sw-card-f__summary { grid-column: 1 / span 6; grid-row: 2; font-size: var(--fs-lead); line-height: 1.5; }
	.sw-card-f__dl { grid-column: 7 / span 3; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 16px; }
	.sw-card-f__dl div { display: flex; flex-direction: column; gap: 4px; }
	.sw-card-f__end { grid-column: 10 / span 3; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 24px; align-items: flex-end; }
	.sw-card-f__tags { justify-content: flex-end; }
	.sw-card-f__link { display: inline-flex; }
}

/* B · medium (7 / 5 pair) */
.sw-card-m { display: flex; flex-direction: column; gap: 14px; }
.sw-card-m__meta { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.sw-card-m__text { display: flex; flex-direction: column; gap: 8px; }
.sw-card-m__summary { display: none; }
.sw-card-m__ind { flex-shrink: 0; }
.sw-card-m:hover h3 { box-shadow: inset 0 -2px 0 var(--sw-pink); align-self: flex-start; }
.sw-pair { margin-top: 48px; display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 768px) {
	.sw-card-m { gap: 24px; }
	.sw-card-m__meta { align-items: flex-start; }
	.sw-card-m__summary { display: block; }
	.sw-card-m__ind { padding-top: 8px; }
	.sw-pair { margin-top: 96px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sw-gutter); align-items: start; }
	.sw-pair__a { grid-column: 1 / span 7; }
	.sw-pair__b { grid-column: 8 / span 5; margin-top: 120px; }
}

/* C · compact (3 col) */
.sw-card-c { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sw-card-c__meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sw-card-c__meta > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sw-card-c__title { font-size: 18px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.sw-card-c__arrow { margin-top: 4px; }
.sw-card-c:hover .sw-card-c__title { box-shadow: inset 0 -2px 0 var(--sw-pink); align-self: flex-start; }
@media (min-width: 768px) {
	.sw-card-c { gap: 16px; }
	.sw-card-c__meta > div { gap: 6px; }
	.sw-card-c__title { font-size: 20px; }
}

/* D · archive row */
.sw-row {
	display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; column-gap: 12px; row-gap: 8px; align-items: center;
	padding: 16px 0; box-shadow: inset 0 1px 0 var(--sw-ink);
}
.sw-row[hidden] { display: none; }
.sw-row__n { color: var(--sw-blue); grid-column: 1; grid-row: 1; }
.sw-row__name { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.sw-row__title { font-size: 20px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.sw-row__thumb { display: block; width: 44px; height: 32px; flex-shrink: 0; object-fit: cover; }
.sw-row__ind { grid-column: 2; grid-row: 2; font-size: 14px; }
.sw-row__tags { display: none; }
.sw-row__arrow { grid-column: 3; grid-row: 1; justify-self: end; }
.sw-row:hover { background: var(--sw-stone); }
.sw-row:hover .sw-row__n, .sw-row:hover .sw-row__arrow { color: var(--sw-violet); }
.sw-row:hover .sw-row__title { box-shadow: inset 0 -2px 0 var(--sw-pink); }
@media (min-width: 1024px) {
	.sw-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sw-gutter); padding: 18px 0; }
	.sw-row__n { grid-column: 1; }
	.sw-row__name { grid-column: 2 / span 4; gap: 16px; }
	.sw-row__title { font-size: 24px; }
	.sw-row__thumb { width: 56px; height: 40px; }
	.sw-row__ind { grid-column: 6 / span 2; grid-row: 1; font-size: var(--fs-body); }
	.sw-row__tags { display: flex; grid-column: 8 / span 4; }
	.sw-row__arrow { grid-column: 12; }
}

.sw-empty { padding: 32px; background: var(--sw-stone); color: var(--sw-grey); }
@media (max-width: 767px) {
	.sw-work .sw-card-m__ind i, .sw-card-f__ind i { display: none; }
	/* mobile cards carry three tags */
	.sw-card-f .tag:nth-child(n+4), .sw-card-m .tag:nth-child(n+4), .sw-card-s .tag:nth-child(n+4) { display: none; }
}

/* Mobile-only / desktop-only copy variants */
.copy-sm { display: none; }
@media (max-width: 767px) {
	.has-copy-sm > .copy-lg { display: none; }
	.has-copy-sm > .copy-sm { display: inline; }
}
.sw-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sw-cv foreignObject > div { font-family: var(--sw-font); line-height: normal; }
.sw-cv--lg { display: none; }
@media (min-width: 768px) {
	.sw-cv--lg { display: block; }
	.sw-cv--sm { display: none; }
}

/* D · archive row — mobile meta line ("Industry · Scope") */
.sw-row__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
@media (max-width: 1023px) {
	.sw-row { display: flex; gap: 14px; padding: 16px 0; }
	.sw-row__n, .sw-row__ind { display: none; }
	.sw-row__name { flex-grow: 1; gap: 14px; }
	.sw-row__title { font-size: 18px; letter-spacing: -.01em; }
	.sw-row__arrow { width: 12px; height: 12px; }
}
@media (min-width: 1024px) { .sw-row__meta { display: none; } }

/* A · featured split (Projects archive) */
.sw-card-s { display: flex; flex-direction: column; gap: 16px; }
.sw-card-s__meta { display: flex; flex-direction: column; gap: 16px; }
.sw-card-s__top { display: flex; flex-direction: column; gap: 16px; }
.sw-card-s__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.sw-card-s__title { font-size: clamp(34px, calc(34px + (100vw - 390px) * .028571), 64px); line-height: 1; letter-spacing: -.035em; font-weight: 700; }
.sw-card-s__top .t-lead { font-size: var(--fs-body); line-height: 1.55; }
.sw-card-s__bottom { display: flex; flex-direction: column; gap: 16px; }
.sw-card-s__dl, .sw-card-s .sw-card-s__btn { display: none; }
.sw-card-s:hover .sw-card-s__link { box-shadow: inset 0 -1.5px 0 var(--sw-pink); }
@media (min-width: 1024px) {
	.sw-card-s { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sw-gutter); gap: 0 var(--sw-gutter); align-items: stretch; }
	.sw-card-s > .sw-visual { grid-column: 1 / span 8; }
	.sw-card-s__meta { grid-column: 9 / span 4; justify-content: space-between; padding: 8px 0 4px; box-shadow: inset 0 1px 0 var(--sw-ink); }
	.sw-card-s__top { gap: 20px; padding-top: 20px; }
	.sw-card-s__top .t-lead { font-size: var(--fs-lead); line-height: 1.5; }
	.sw-card-s__bottom { gap: 28px; }
	.sw-card-s__dl { display: flex; flex-direction: column; box-shadow: inset 0 1px 0 var(--sw-line); }
	.sw-card-s__dl div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; box-shadow: inset 0 -1px 0 var(--sw-line); }
	.sw-card-s__dl dd { text-align: right; }
	.sw-card-s .sw-card-s__btn { display: inline-flex; align-self: flex-start; }
	.sw-card-s__link { display: none; }
	.sw-card-s:hover .sw-card-s__btn { background: var(--sw-ink); color: #fff; }
}

/* ==========================================================================
   Case study shared parts — media slot, caption, bullet list, meta rows
   ========================================================================== */
.sw-media { position: relative; overflow: hidden; background: var(--sw-stone-2); aspect-ratio: var(--ar-sm, var(--ar, 16 / 9)); }
@media (min-width: 768px) { .sw-media { aspect-ratio: var(--ar, 16 / 9); } }
.sw-media__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sw-media > .sw-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.sw-media > .sw-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sw-fig { display: flex; flex-direction: column; gap: 10px; }
.sw-figcap { display: flex; justify-content: space-between; gap: 16px; color: var(--sw-grey); }
@media (min-width: 1024px) { .sw-fig { gap: 12px; } }

.sw-bul { box-shadow: inset 0 1px 0 var(--sw-ink); }
.sw-bul li { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; box-shadow: inset 0 -1px 0 var(--sw-line); font-size: 16px; line-height: 1.45; }
.sw-bul li i { display: block; width: 7px; height: 7px; background: var(--sw-blue); flex-shrink: 0; transform: translateY(-1px); }
@media (min-width: 1024px) {
	.sw-bul li { gap: 14px; padding: 14px 0; font-size: 17px; line-height: 1.5; }
	.sw-bul li i { width: 8px; height: 8px; }
}

.sw-meta { box-shadow: inset 0 1px 0 var(--sw-ink); }
.sw-meta > div { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; box-shadow: inset 0 -1px 0 var(--sw-line); }
.sw-meta dt { color: var(--sw-grey); }
.sw-meta dd.mono { color: var(--sw-ink); }
.sw-meta .sw-ind { color: var(--sw-ink); }
@media (min-width: 1024px) {
	.sw-meta > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 0; }
	.sw-meta dt { padding-top: 6px; font-size: var(--fs-mono); line-height: 16px; }
	.sw-meta dd.mono { padding-top: 6px; }
}
.is-ink .sw-meta { box-shadow: inset 0 1px 0 #fff; }
.is-ink .sw-meta > div { box-shadow: inset 0 -1px 0 rgba(255,255,255,.18); }

/* ==========================================================================
   Photo slot + approved placeholder (About: team, founder, portraits)
   ========================================================================== */
.sw-photo { position: relative; overflow: hidden; background: var(--sw-stone-2); }
.sw-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sw-ph {
	background-color: var(--sw-stone-2);
	background-image: linear-gradient(rgba(16,16,16,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(16,16,16,.05) 1px, transparent 1px);
	background-size: 20px 20px;
	display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px;
}
.sw-ph .cap { color: var(--sw-grey); text-align: center; }
.sw-ph__icon { width: var(--ph-icon-sm, auto); height: auto; }
.sw-ph__crop { position: absolute; width: 14px; height: 14px; }
.sw-ph__crop.is-tl { left: 14px; top: 14px; box-shadow: inset 2px 2px 0 var(--sw-ink); }
.sw-ph__crop.is-tr { right: 14px; top: 14px; box-shadow: inset -2px 2px 0 var(--sw-ink); }
.sw-ph__crop.is-bl { left: 14px; bottom: 14px; box-shadow: inset 2px -2px 0 var(--sw-ink); }
.sw-ph__crop.is-br { right: 14px; bottom: 14px; box-shadow: inset -2px -2px 0 var(--sw-ink); }
@media (min-width: 768px) {
	.sw-ph { background-size: 24px 24px; gap: 14px; }
	.sw-ph__icon { width: var(--ph-icon, auto); }
	.sw-ph__crop { width: 18px; height: 18px; }
	.sw-ph__crop.is-tl, .sw-ph__crop.is-bl { left: 24px; }
	.sw-ph__crop.is-tr, .sw-ph__crop.is-br { right: 24px; }
	.sw-ph__crop.is-tl, .sw-ph__crop.is-tr { top: 24px; }
	.sw-ph__crop.is-bl, .sw-ph__crop.is-br { bottom: 24px; }
}

/* Desktop headlines balance their lines (mobile artboards wrap naturally) */
@media (min-width: 1024px) { .t-display, .t-h1, .t-h2 { text-wrap: balance; } }

/* ==========================================================================
   Text pages (legal, 404, search, archives)
   ========================================================================== */
.sw-phead { padding: 24px 0 0; }
.sw-phead__text { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; max-width: 960px; }
.sw-phead__lead { max-width: 640px; }
.sw-text { --pt: 48px; }
.sw-prose a { box-shadow: inset 0 -1px 0 currentColor; }
.sw-prose a:hover { box-shadow: inset 0 -1px 0 var(--sw-pink); }
.sw-prose strong { font-weight: 700; }
.sw-prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.sw-prose th, .sw-prose td { text-align: left; padding: 10px 16px 10px 0; box-shadow: inset 0 -1px 0 var(--sw-line); vertical-align: top; }
.sw-prose th { font-family: var(--sw-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; color: var(--sw-grey); box-shadow: inset 0 -1px 0 var(--sw-ink); }
.sw-prose blockquote { padding-left: 20px; box-shadow: inset 2px 0 0 var(--sw-blue); font-size: var(--fs-lead); }
.sw-prose img { margin-block: 1.5em; }
.sw-list { box-shadow: inset 0 -1px 0 var(--sw-ink); }
.sw-list__row { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; padding: 20px 0; box-shadow: inset 0 1px 0 var(--sw-ink); }
.sw-list__t { flex-grow: 1; font-size: var(--fs-h4); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
.sw-list__row:hover .sw-list__t { color: var(--sw-blue); }
.sw-list__pager { margin-top: 32px; }
.sw-list__pager .nav-links { display: flex; gap: 12px; }
.sw-list__pager .current { color: var(--sw-blue); }
@media (min-width: 1024px) {
	.sw-phead { padding-top: 40px; }
	.sw-phead__text { margin-top: 72px; gap: 32px; }
	.sw-text { --pt: 72px; }
	.sw-list__row { display: grid; grid-template-columns: 200px 1fr auto; padding: 28px 0; }
}