/*!
Theme Name: SWP Portfolio Pro
Theme URI:
Author: ScintillawpThemes
Author URI: https://scintillawpthemes.com/
Description: SWP Portfolio Pro is a sharp, lime-and-ink personal portfolio WordPress theme for art directors, designers, photographers and small studios. Built on the Customizer + Kirki, it ships with reorderable homepage sections, a Project and Service post type, a one-click demo importer, Contact Form 7 styling, a scroll pop-up and a full set of inner page templates.
Version: 1.2.0
Requires at least: 5.5
Requires PHP: 7.2
Tested up to: 6.8
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: swp-portfolio-pro
Tags: portfolio, blog, one-column, two-columns, custom-colors, custom-menu, custom-logo, featured-images, theme-options, threaded-comments, translation-ready, full-width-template, block-styles, wide-blocks
*/

/* ============================================================
   TABLE OF CONTENTS
   1.  Design tokens
   2.  Reset & base
   3.  Layout & type scale
   4.  Buttons
   5.  Reveal animation
   6.  Preloader
   7.  Header / navigation / sticky bar
   8.  Hero
   9.  Client marquee
   10. Collaborate
   11. Stats band
   12. About
   13. Section heading pattern
   14. Services
   15. Toolkit
   16. Work / portfolio
   17. Process
   18. Recognition
   19. Testimonials carousel
   20. Journal
   21. FAQ
   22. Contact
   23. CTA
   24. Footer
   25. Back to top
   26. Scroll pop-up
   27. Page banner
   28. Blog / archive / single
   29. Comments
   30. Sidebar & widgets
   31. Pagination
   32. Contact Form 7
   33. WordPress core & block editor
   34. Icon centring
   35. Accessibility & reduced motion
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   Colour + type values are re-declared inline by the Customizer
   (see swp_portfolio_pro_dynamic_css); these are the fallbacks.
   ============================================================ */
:root {
	--swp-lime: #C8F14D;
	--swp-lime-deep: #B2DF33;
	--swp-ink: #101110;
	--swp-graphite: #2B2C2A;
	--swp-slate: #6E7269;
	--swp-mist: #F2F3EF;
	--swp-line: #E3E5DE;
	--swp-shell: #FFFFFF;

	--font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fs-base: 16px;
	--h-scale: 1;

	/*
	 * Inner content is locked to --container at every viewport above it.
	 * `max()` (not `clamp()`) matters: a clamp ceiling would stop the padding
	 * growing on very wide screens and the content would widen past 1320px.
	 * Sections stay full-bleed — only the .wrap padding centres their content.
	 */
	--container: 1320px;
	--gutter: 20px;
	--pad: max(var(--gutter), calc((100% - var(--container)) / 2));

	--r-sm: 10px;
	--r-md: 18px;
	--r-lg: 26px;
	--r-pill: 999px;

	--sec: clamp(64px, 7vw, 110px);
	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

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

/*
 * `overflow-x: clip` rather than `hidden`: hidden would make the body a scroll
 * container, which stops the sticky header from ever sticking. Sections that
 * position decoration outside their own box (hero, CTA, marquee) clip it
 * themselves, so this is only a backstop.
 */
body {
	margin: 0;
	background: var(--swp-shell);
	color: var(--swp-ink);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

img, svg, video, iframe { max-width: 100%; }
img { display: block; height: auto; }
svg { display: block; }
a { color: inherit; text-decoration: none; }

button {
	font: inherit;
	color: inherit;
	border: 0;
	background: none;
	cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	margin: 0;
	line-height: 1.06;
	letter-spacing: -.028em;
	font-weight: 700;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
ul { list-style: none; }

:focus-visible {
	outline: 3px solid var(--swp-ink);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection { background: var(--swp-lime); color: var(--swp-ink); }

/* ============================================================
   3. LAYOUT & TYPE SCALE
   ============================================================ */
/*
 * Full-bleed element, 1320px of content. Every .wrap sits directly inside a
 * container with no horizontal padding of its own (body, .hdr, .ftr, .band,
 * .kit, .tst), so the `100%` in --pad resolves against the viewport.
 */
.wrap {
	padding-left: var(--pad);
	padding-right: var(--pad);
}

.sec { padding-top: var(--sec); padding-bottom: var(--sec); }
.sec-tight { padding-top: clamp(44px, 5vw, 72px); padding-bottom: clamp(44px, 5vw, 72px); }
.sec-line { border-top: 1px solid var(--swp-line); }
.sec-mist { background: var(--swp-mist); }

.d1 { font-size: calc(clamp(46px, 9.2vw, 120px) * var(--h-scale)); letter-spacing: -.042em; line-height: .9; }
.d2 { font-size: calc(clamp(30px, 4.6vw, 58px) * var(--h-scale)); letter-spacing: -.032em; line-height: 1.02; }
.d3 { font-size: calc(clamp(25px, 3vw, 40px) * var(--h-scale)); letter-spacing: -.028em; }
.d4 { font-size: calc(clamp(19px, 1.7vw, 25px) * var(--h-scale)); letter-spacing: -.02em; }

.lead { font-size: clamp(16px, 1.25vw, 19px); color: var(--swp-slate); line-height: 1.72; }
.muted { color: var(--swp-slate); }
.mini { font-size: 13px; line-height: 1.55; }

.accent, .hl { color: var(--swp-lime-deep); }
.light { color: var(--swp-slate); font-weight: 400; }
.ul {
	background: linear-gradient(transparent 68%, var(--swp-lime) 68%);
	padding-inline: 2px;
}

.eyebrow {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--swp-slate);
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.eyebrow .dot,
.eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--swp-lime-deep);
	flex: none;
}

.eyebrow .dot ~ .dot { display: none; }
.eyebrow:has(.dot)::before { display: none; }

/* Icon sizes */
.ic { width: 20px; height: 20px; flex: none; }
.ic-sm { width: 16px; height: 16px; flex: none; }
.ic-lg { width: 26px; height: 26px; flex: none; }
.ic-xs { width: 13px; height: 13px; flex: none; }

/* ============================================================
   4. BUTTONS
   ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 8px 8px 8px 26px;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -.01em;
	transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
	white-space: nowrap;
	cursor: pointer;
}

.btn > span { padding-block: 2px; }

.btn > i {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	flex: none;
	transition: transform .45s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.btn:hover { transform: translateY(-2px); }
.btn:hover > i { transform: rotate(45deg); }

.btn-lime { background: var(--swp-lime); color: var(--swp-ink); }
.btn-lime > i { background: var(--swp-ink); color: var(--swp-lime); }
.btn-lime:hover { background: var(--swp-lime-deep); }

.btn-ink { background: var(--swp-ink); color: #fff; }
.btn-ink > i { background: var(--swp-lime); color: var(--swp-ink); }
.btn-ink:hover { background: var(--swp-graphite); }

.btn-outline {
	background: transparent;
	color: var(--swp-ink);
	box-shadow: inset 0 0 0 1.5px var(--swp-line);
}
.btn-outline > i { background: var(--swp-mist); color: var(--swp-ink); }
.btn-outline:hover { box-shadow: inset 0 0 0 1.5px var(--swp-ink); }

.btn-ghost-light {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22);
}
.btn-ghost-light > i { background: var(--swp-lime); color: var(--swp-ink); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .16); }

.btn-on-lime {
	background: transparent;
	color: var(--swp-ink);
	box-shadow: inset 0 0 0 1.5px rgba(16, 17, 16, .25);
}
.btn-on-lime > i { background: rgba(16, 17, 16, .08); color: var(--swp-ink); }
.btn-on-lime:hover { box-shadow: inset 0 0 0 1.5px var(--swp-ink); }

/* ============================================================
   5. REVEAL ANIMATION
   ============================================================ */
html.js .rev {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .8s var(--ease), transform .8s var(--ease);
}
html.js .rev.in { opacity: 1; transform: none; }
html.js .rev-d1 { transition-delay: .08s; }
html.js .rev-d2 { transition-delay: .16s; }
html.js .rev-d3 { transition-delay: .24s; }
html.js .rev-d4 { transition-delay: .32s; }

/* ============================================================
   6. PRELOADER
   ============================================================ */
.swp-loader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.swp-loader.loaded { opacity: 0; visibility: hidden; }
.swp-loader-logo { max-width: 190px; max-height: 78px; width: auto; }
.swp-loader-mark { display: grid; place-items: center; color: var(--swp-ink); }
.swp-loader-mark svg { width: 56px; height: 56px; }

.swp-loader.anim-pulse .swp-loader-inner { animation: swpPulse 1.5s var(--ease) infinite; }
.swp-loader.anim-bounce .swp-loader-inner { animation: swpBounce 1.1s var(--ease) infinite; }
.swp-loader.anim-fade .swp-loader-inner { animation: swpFade 1.4s ease-in-out infinite; }
.swp-loader.anim-spin .swp-loader-inner { position: relative; padding: 30px; }
.swp-loader.anim-spin .swp-loader-inner::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2.5px solid var(--swp-line);
	border-top-color: var(--swp-lime-deep);
	animation: swpSpin .85s linear infinite;
}

@keyframes swpPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.9); opacity: .6; } }
@keyframes swpBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes swpFade { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes swpSpin { to { transform: rotate(360deg); } }

/* ============================================================
   7. HEADER / NAVIGATION / STICKY BAR
   ============================================================ */
.hdr {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.hdr.stuck {
	border-color: var(--swp-line);
	box-shadow: 0 10px 30px -24px rgba(16, 17, 16, .5);
}

.hdr-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 82px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -.03em;
	color: var(--swp-ink);
}
.brand-mark { width: 30px; height: 30px; flex: none; color: var(--swp-ink); }
.brand-logo img { max-height: 46px; width: auto; }
.brand-txt b { font-weight: 700; }

/* Sticky-state logo swap */
.brand .logo-sticky { display: none; }
.hdr.stuck .brand.has-sticky .logo-main { display: none; }
.hdr.stuck .brand.has-sticky .logo-sticky { display: block; }

.nav { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 30px); }
.nav ul { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 30px); }
.nav li { position: relative; }

.nav a {
	font-size: 15px;
	font-weight: 500;
	color: var(--swp-slate);
	position: relative;
	padding: 6px 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color .25s var(--ease);
}
.nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 0;
	background: var(--swp-ink);
	transition: width .3s var(--ease);
}
.nav a:hover,
.nav .current-menu-item > a,
.nav .current_page_item > a,
.nav .current-menu-ancestor > a,
.nav a[aria-current="page"] { color: var(--swp-ink); }

.nav a:hover::after,
.nav .current-menu-item > a::after,
.nav .current_page_item > a::after,
.nav a[aria-current="page"]::after { width: 100%; }

/* Drop-downs */
.nav .menu-item-has-children > a::before {
	content: "";
	width: 5px;
	height: 5px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	order: 2;
	margin-left: 3px;
}
.nav ul ul {
	position: absolute;
	top: 100%;
	left: -18px;
	display: block;
	min-width: 226px;
	background: var(--swp-shell);
	border: 1px solid var(--swp-line);
	border-radius: var(--r-md);
	padding: 10px;
	box-shadow: 0 26px 54px -34px rgba(16, 17, 16, .5);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
	z-index: 5;
}
.nav li:hover > ul,
.nav li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
.nav ul ul li { width: 100%; }
.nav ul ul a {
	display: block;
	padding: 9px 13px;
	border-radius: var(--r-sm);
	font-size: 14.4px;
	width: 100%;
}
.nav ul ul a::after { display: none; }
.nav ul ul a:hover { background: var(--swp-mist); color: var(--swp-ink); }
.nav ul ul ul { top: -11px; left: calc(100% + 8px); }

.hdr-actions { display: inline-flex; align-items: center; gap: 12px; }

.hdr-search {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--swp-mist);
	display: grid;
	place-items: center;
	color: var(--swp-ink);
	transition: background .28s var(--ease), color .28s var(--ease);
}
.hdr-search:hover { background: var(--swp-ink); color: var(--swp-lime); }

.burger {
	display: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--swp-mist);
	place-items: center;
	color: var(--swp-ink);
}

/* Search overlay */
.swp-search-pop {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(16, 17, 16, .82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: grid;
	place-items: center;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s var(--ease), visibility .3s;
}
.swp-search-pop.open { opacity: 1; visibility: visible; }
.swp-search-pop .search-form { width: min(640px, 100%); display: flex; gap: 10px; }
.swp-search-pop .search-field {
	flex: 1;
	background: #fff;
	border: 0;
	border-radius: var(--r-pill);
	padding: 18px 26px;
	font: inherit;
	font-size: 17px;
}
.swp-search-pop .search-submit {
	background: var(--swp-lime);
	color: var(--swp-ink);
	border-radius: var(--r-pill);
	padding: 0 30px;
	font-family: var(--font-display);
	font-weight: 600;
}
.swp-search-close {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	display: grid;
	place-items: center;
}

/* Mobile nav */
.mnav {
	display: none;
	border-top: 1px solid var(--swp-line);
	padding: 14px var(--pad) 26px;
	background: var(--swp-shell);
	max-height: calc(100vh - 82px);
	overflow-y: auto;
}
.mnav.open { display: block; }
.mnav ul { display: block; }

/*
 * `:not(.btn)` is load-bearing: the CTA at the foot of the menu is a pill, and
 * a blanket `display:block` here would drop its arrow onto its own line.
 */
.mnav a:not(.btn) {
	display: block;
	padding: 12px 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	border-bottom: 1px solid var(--swp-line);
	color: var(--swp-ink);
}
.mnav li { position: relative; }
.mnav ul ul { padding-left: 16px; }
.mnav ul ul a { font-size: 15.4px; font-weight: 500; color: var(--swp-slate); }
.mnav .btn { margin-top: 20px; display: inline-flex; }

/* Sub-menus collapse behind a caret so a deep menu stays scannable. */
.mnav .menu-item-has-children > a { padding-right: 52px; }
.mnav-toggle {
	position: absolute;
	top: 4px;
	right: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--swp-mist);
	color: var(--swp-ink);
	display: grid;
	place-items: center;
	transition: background .28s var(--ease), transform .35s var(--ease);
}
.mnav-toggle[aria-expanded="true"] { background: var(--swp-lime); transform: rotate(180deg); }
.mnav .menu-item-has-children > ul[hidden] { display: none; }

@media (max-width: 1080px) {
	.nav, .hdr-cta { display: none; }
	.burger { display: grid; }
}

/* ============================================================
   8. HERO
   ============================================================ */
.hero {
	padding-top: clamp(38px, 4.4vw, 64px);
	padding-bottom: clamp(30px, 3.4vw, 52px);
	position: relative;
	overflow: hidden;
}
.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.14fr) minmax(0, .95fr) minmax(0, .68fr);
	gap: clamp(20px, 2.4vw, 52px);
	align-items: center;
}
.hero-hi {
	font-family: var(--font-display);
	font-size: clamp(16px, 1.4vw, 20px);
	font-weight: 500;
	color: var(--swp-graphite);
	margin-bottom: 14px;
}
.hero-name { margin-bottom: 22px; }
.hero-name em { font-style: normal; display: block; }
.hero-copy {
	max-width: 40ch;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--swp-slate);
	margin-bottom: 32px;
}

.hero-card {
	background: var(--swp-shell);
	border-radius: var(--r-lg);
	padding: 16px 16px 0;
	box-shadow: 0 40px 80px -50px rgba(16, 17, 16, .55), 0 0 0 1px var(--swp-line);
	position: relative;
}
.hero-photo {
	position: relative;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--swp-mist);
	aspect-ratio: 1 / 1.26;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }

.hero-social {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.hero-social a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .82);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: grid;
	place-items: center;
	color: var(--swp-graphite);
	transition: background .28s var(--ease), color .28s var(--ease), transform .28s var(--ease);
}
.hero-social a:hover { background: var(--swp-ink); color: var(--swp-lime); transform: translateY(-2px); }

.hero-avail {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 16px 10px;
	font-size: 14px;
	font-weight: 500;
}
.dot-live {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #3FA34D;
	position: relative;
	flex: none;
}
.dot-live::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 1.5px solid rgba(63, 163, 77, .35);
	animation: swpRing 2.4s ease-out infinite;
}
@keyframes swpRing { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }

.hero-right {
	border-left: 1.5px solid var(--swp-line);
	padding-left: clamp(18px, 1.7vw, 26px);
}
.hero-role { font-size: 15px; color: var(--swp-slate); line-height: 1.5; margin-bottom: 14px; }
.hero-title2 { margin-bottom: 30px; font-size: calc(clamp(28px, 3.4vw, 46px) * var(--h-scale)); }
.hero-proof { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }

.stack { display: flex; }
.stack img,
.stack .stack-more {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2.5px solid #fff;
	object-fit: cover;
	margin-left: -11px;
}
.stack img:first-child { margin-left: 0; }
.stack-more {
	background: var(--swp-ink);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
}

.hero-kpi {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.03em;
}
.hero-kpi span {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	color: var(--swp-slate);
	letter-spacing: 0;
	margin-left: 6px;
}
.hero-note { font-size: 14px; font-weight: 600; margin-top: 10px; }

.hero-mark {
	position: absolute;
	left: calc(var(--pad) + 40px);
	bottom: 26px;
	width: 58px;
	height: 58px;
	color: var(--swp-line);
	animation: swpSpin 26s linear infinite;
}

@media (max-width: 1080px) {
	.hero-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
	.hero-card { grid-row: span 2; order: 2; }
	.hero-right {
		border-left: 0;
		padding-left: 0;
		border-top: 1.5px solid var(--swp-line);
		padding-top: 26px;
		order: 3;
	}
	.hero-mark { display: none; }
}
@media (max-width: 720px) {
	.hero-grid { grid-template-columns: 1fr; }
	.hero-card { grid-row: auto; }
}

/* ============================================================
   9. CLIENT MARQUEE
   ============================================================ */
.trust { border-top: 1px solid var(--swp-line); border-bottom: 1px solid var(--swp-line); }
.trust-in {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.4vw, 38px);
	padding-block: 26px;
}
.trust-lbl {
	font-family: var(--font-display);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.35;
	flex: none;
	max-width: 118px;
	padding-right: clamp(18px, 2.4vw, 38px);
	border-right: 1px solid var(--swp-line);
}
.marquee {
	overflow: hidden;
	flex: 1;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 88%, transparent);
}
.marquee-track {
	display: flex;
	align-items: center;
	gap: clamp(34px, 4.5vw, 72px);
	width: max-content;
	animation: swpSlide 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes swpSlide { to { transform: translateX(-50%); } }

.plogo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -.03em;
	color: #B9BDB2;
	transition: color .3s var(--ease);
	white-space: nowrap;
}
.plogo:hover { color: var(--swp-graphite); }
.plogo svg { width: 26px; height: 26px; }
.plogo img { max-height: 30px; width: auto; opacity: .6; transition: opacity .3s var(--ease); }
.plogo:hover img { opacity: 1; }

@media (max-width: 640px) { .trust-lbl { display: none; } }

/* ============================================================
   10. COLLABORATE
   ============================================================ */
.collab-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
	gap: clamp(28px, 4.4vw, 76px);
	align-items: center;
}
.collab-copy { order: 2; }
.collab-visual { order: 1; position: relative; }
.collab-h { margin: 16px 0 20px; }
.collab-h b { font-weight: 700; }
.collab-sub {
	font-size: 15.5px;
	color: var(--swp-slate);
	line-height: 1.72;
	max-width: 46ch;
	margin-bottom: 30px;
}

.collab-panel {
	border: 1.5px solid var(--swp-line);
	border-radius: var(--r-md);
	display: grid;
	grid-template-columns: 1fr 1fr;
	overflow: hidden;
	margin-bottom: 30px;
}
.cbox {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 20px clamp(16px, 1.6vw, 24px);
	border-right: 1.5px solid var(--swp-line);
	transition: background .3s var(--ease);
}
.cbox:last-child { border-right: 0; }
.cbox:hover { background: var(--swp-mist); }
.cbox i {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px var(--swp-line);
	display: grid;
	place-items: center;
	flex: none;
	transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.cbox:hover i { background: var(--swp-lime); box-shadow: inset 0 0 0 1.5px var(--swp-lime); }
.cbox-lbl { font-size: 12.5px; color: var(--swp-slate); display: block; line-height: 1.4; }
.cbox-val { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }

.mocks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(12px, 1.4vw, 22px);
	align-items: start;
}
.mock { border-radius: var(--r-md); overflow: hidden; background: var(--swp-mist); }
.mock img { width: 100%; height: 100%; object-fit: cover; }
.mock-a { aspect-ratio: 3 / 4; margin-top: clamp(24px, 3.4vw, 58px); }
.mock-b { aspect-ratio: 4 / 5; margin-bottom: clamp(24px, 3.4vw, 58px); }

.collab-badge {
	position: absolute;
	left: clamp(10px, 1.2vw, 18px);
	bottom: clamp(6px, 1vw, 14px);
	background: var(--swp-lime);
	color: var(--swp-ink);
	font-family: var(--font-display);
	font-size: 12.5px;
	font-weight: 600;
	padding: 9px 17px;
	border-radius: var(--r-pill);
	box-shadow: 0 14px 30px -18px rgba(16, 17, 16, .7);
}

@media (max-width: 880px) {
	.collab-grid { grid-template-columns: 1fr; }
	.collab-copy { order: 1; }
	.collab-visual { order: 2; }
	.mock-a, .mock-b { margin: 0; }
}
@media (max-width: 480px) {
	.collab-panel { grid-template-columns: 1fr; }
	.cbox { border-right: 0; border-bottom: 1.5px solid var(--swp-line); }
	.cbox:last-child { border-bottom: 0; }
}

/* ============================================================
   11. STATS BAND
   ============================================================ */
.band { background: var(--swp-graphite); color: #fff; }
.band .muted { color: rgba(255, 255, 255, .6); }
.band .eyebrow { color: rgba(255, 255, 255, .55); }

.band-h {
	text-align: center;
	max-width: 26ch;
	margin: 0 auto clamp(38px, 4.6vw, 66px);
	font-size: calc(clamp(24px, 3.4vw, 42px) * var(--h-scale));
	line-height: 1.24;
	letter-spacing: -.022em;
	font-weight: 600;
}
.band-h .light,
.band-h span { color: rgba(255, 255, 255, .45); }

.band-row {
	display: grid;
	grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 60px);
	align-items: center;
}
.vid {
	position: relative;
	border-radius: var(--r-md);
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: #1a1b19;
	box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .9);
}
.vid img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.vid .vid-btn {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: linear-gradient(180deg, rgba(16, 17, 16, .05), rgba(16, 17, 16, .42));
}
.vid .vid-btn i {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--swp-lime);
	color: var(--swp-ink);
	display: grid;
	place-items: center;
	transition: transform .35s var(--ease);
}
.vid .vid-btn:hover i { transform: scale(1.09); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat {
	padding-left: clamp(16px, 2.4vw, 40px);
	border-left: 1px solid rgba(255, 255, 255, .16);
}
.stat:first-child { border-left: 0; padding-left: 0; }
.stat b {
	display: block;
	font-family: var(--font-display);
	font-size: calc(clamp(38px, 5.4vw, 64px) * var(--h-scale));
	font-weight: 700;
	letter-spacing: -.04em;
	line-height: 1;
}
.stat span { font-size: 13.5px; color: rgba(255, 255, 255, .6); display: block; margin-top: 8px; }

/* Lightbox for the reel */
.swp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 95;
	background: rgba(16, 17, 16, .9);
	display: grid;
	place-items: center;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s var(--ease), visibility .3s;
}
.swp-lightbox.open { opacity: 1; visibility: visible; }
.swp-lightbox-inner {
	width: min(1000px, 100%);
	aspect-ratio: 16 / 9;
	border-radius: var(--r-md);
	overflow: hidden;
	background: #000;
}
.swp-lightbox-inner iframe { width: 100%; height: 100%; border: 0; }
.swp-lightbox-close {
	position: absolute;
	top: 22px;
	right: 22px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	display: grid;
	place-items: center;
}

@media (max-width: 880px) { .band-row { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
	.stats { grid-template-columns: 1fr; gap: 22px; }
	.stat {
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .16);
		padding-top: 18px;
	}
	.stat:first-child { border-top: 0; padding-top: 0; }
}

/* ============================================================
   12. ABOUT
   ============================================================ */
.about-grid {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
	gap: clamp(30px, 4.4vw, 72px);
	align-items: center;
}
.about-img {
	border-radius: var(--r-lg);
	overflow: hidden;
	aspect-ratio: 1 / 1.06;
	background: var(--swp-mist);
	position: relative;
}
.about-img img { width: 100%; height: 100%; object-fit: cover; }
.about-badge {
	position: absolute;
	left: 20px;
	bottom: 20px;
	right: 20px;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: var(--r-md);
	padding: 18px 20px;
	display: flex;
	align-items: center;
	gap: 14px;
}
.about-badge b {
	font-family: var(--font-display);
	font-size: 30px;
	letter-spacing: -.035em;
	line-height: 1;
}
.about-badge span { font-size: 13px; color: var(--swp-slate); line-height: 1.4; }

.about-head { margin: 18px 0 20px; }
.about-list { margin-top: 30px; display: grid; gap: 14px; }
.about-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; }
.about-list i {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--swp-lime);
	display: grid;
	place-items: center;
	flex: none;
	margin-top: 2px;
	color: var(--swp-ink);
}
.about-sign { margin-top: 34px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.sign-svg { width: 150px; height: 52px; color: var(--swp-ink); }
.about-sign img { max-height: 56px; width: auto; }

@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; } }

/* ============================================================
   13. SECTION HEADING PATTERN
   ============================================================ */
.sh {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	margin-bottom: clamp(34px, 4vw, 58px);
	flex-wrap: wrap;
}
.sh-l { max-width: 60ch; }
.sh h2 { margin-top: 16px; }
.sh p { margin-top: 16px; max-width: 52ch; }
.sh-center { justify-content: center; text-align: center; flex-direction: column; align-items: center; }
.sh-center .sh-l { max-width: 44ch; }

/* ============================================================
   14. SERVICES
   ============================================================ */
.svc {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
}
.svc-card {
	border-radius: var(--r-md);
	padding: clamp(24px, 2.4vw, 34px);
	background: var(--swp-mist);
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: background .38s var(--ease), transform .38s var(--ease), color .38s var(--ease);
	position: relative;
	overflow: hidden;
	color: var(--swp-ink);
}
.svc-card:hover { background: var(--swp-ink); color: #fff; transform: translateY(-5px); }
.svc-card:hover .muted,
.svc-card:hover .svc-num { color: rgba(255, 255, 255, .55); }
.svc-card:hover .svc-ic { background: var(--swp-lime); color: var(--swp-ink); }

.svc-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.svc-ic {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--swp-shell);
	color: var(--swp-ink);
	display: grid;
	place-items: center;
	flex: none;
	transition: background .38s var(--ease), color .38s var(--ease);
}
.svc-num {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--swp-slate);
	letter-spacing: .06em;
}
.svc-card h3 { font-size: 21px; letter-spacing: -.024em; }
.svc-card p { font-size: 14.6px; line-height: 1.66; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 6px; }
.svc-tags span {
	font-size: 12px;
	padding: 5px 11px;
	border-radius: var(--r-pill);
	background: rgba(16, 17, 16, .06);
	transition: background .38s var(--ease);
}
.svc-card:hover .svc-tags span { background: rgba(255, 255, 255, .12); }

/* --- Single service --------------------------------------- */
.svc-lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}
.svc-lead h2 { margin: 16px 0 18px; }
.svc-lead .svc-tags { margin: 26px 0 30px; padding-top: 0; }
.svc-lead .svc-tags span { background: var(--swp-mist); font-size: 12.6px; padding: 7px 14px; }

.svc-lead-media { border-radius: var(--r-lg); overflow: hidden; background: var(--swp-mist); }
.svc-lead-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

.svc-icon-panel {
	aspect-ratio: 4 / 3;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 20px;
	padding: clamp(24px, 3vw, 44px);
	text-align: center;
	background:
		radial-gradient(circle at 30% 25%, rgba(200, 241, 77, .35), transparent 60%),
		var(--swp-mist);
}
.svc-icon-panel .svc-ic { width: 92px; height: 92px; border-radius: 26px; }
.svc-icon-panel .svc-ic svg { width: 42px; height: 42px; }
.svc-icon-panel b { font-family: var(--font-display); font-size: 22px; letter-spacing: -.024em; }

.svc-body {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
	gap: clamp(30px, 4vw, 64px);
	align-items: start;
}
.svc-aside {
	background: var(--swp-mist);
	border-radius: var(--r-lg);
	padding: clamp(24px, 2.6vw, 34px);
	position: sticky;
	top: 110px;
}
.svc-aside h3 { font-size: 21px; letter-spacing: -.026em; margin-bottom: 20px; }
.svc-aside .about-list { margin-top: 0; }
.svc-aside .about-list li { font-size: 14.6px; }
.svc-aside .about-list i { background: var(--swp-shell); }
.svc-aside-foot {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--swp-line);
	display: grid;
	gap: 14px;
}
.svc-aside-foot .mini { color: var(--swp-slate); }

@media (max-width: 980px) {
	.svc-lead, .svc-body { grid-template-columns: 1fr; }
	.svc-aside { position: static; }
}

/* ============================================================
   15. TOOLKIT
   ============================================================ */
.kit { background: var(--swp-mist); }
.kit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: clamp(12px, 1.4vw, 18px);
}
.kit-item {
	background: var(--swp-shell);
	border-radius: var(--r-md);
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.kit-item:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -34px rgba(16, 17, 16, .6); }
.kit-item svg { color: var(--swp-graphite); }
.kit-item b { font-family: var(--font-display); font-size: 16px; letter-spacing: -.02em; }
.kit-item span { font-size: 12.8px; color: var(--swp-slate); line-height: 1.5; }

/* ============================================================
   16. WORK / PORTFOLIO
   ============================================================ */
.work-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
	padding: 9px 18px;
	border-radius: var(--r-pill);
	font-size: 14px;
	font-weight: 500;
	box-shadow: inset 0 0 0 1.5px var(--swp-line);
	transition: background .28s var(--ease), box-shadow .28s var(--ease), color .28s var(--ease);
}
.chip[aria-pressed="true"] {
	background: var(--swp-ink);
	color: #fff;
	box-shadow: inset 0 0 0 1.5px var(--swp-ink);
}
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--swp-ink); }

.work-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: clamp(16px, 1.9vw, 26px);
}
.work-card {
	display: block;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--swp-mist);
	position: relative;
}
.work-media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--swp-line);
	position: relative;
}
.work-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--ease);
}
.work-card:hover .work-media img { transform: scale(1.05); }
.work-body {
	padding: 22px clamp(20px, 2vw, 26px) 26px;
	display: flex;
	/* Centred against the whole title + sub-line block, not pinned to the title. */
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.work-body h3 { font-size: 20px; letter-spacing: -.024em; }
.work-body span { font-size: 13.4px; color: var(--swp-slate); display: block; margin-top: 6px; }
.work-go {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	flex: none;
	background: var(--swp-shell);
	display: grid;
	place-items: center;
	transition: background .32s var(--ease), color .32s var(--ease), transform .42s var(--ease);
}
.work-card:hover .work-go { background: var(--swp-lime); transform: rotate(45deg); }
.work-year {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	background: rgba(255, 255, 255, .9);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	padding: 6px 13px;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
}
.work-card.hide { display: none; }

/* Single project */
.project-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: clamp(16px, 2vw, 30px);
	padding: clamp(24px, 2.6vw, 34px);
	background: var(--swp-mist);
	border-radius: var(--r-lg);
	margin-bottom: clamp(30px, 3.4vw, 48px);
}
.project-meta > div span {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--swp-slate);
	font-family: var(--font-display);
	margin-bottom: 8px;
}
.project-meta > div b { font-family: var(--font-display); font-size: 18px; letter-spacing: -.02em; }
.project-hero {
	border-radius: var(--r-lg);
	overflow: hidden;
	margin-bottom: clamp(30px, 3.4vw, 48px);
	background: var(--swp-mist);
}

/* ============================================================
   17. PROCESS
   ============================================================ */
.proc {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(18px, 2.2vw, 30px);
}
.proc-step { padding-top: 26px; border-top: 2px solid var(--swp-line); position: relative; }
.proc-step:first-child { border-top-color: var(--swp-ink); }
.proc-step b {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--swp-slate);
	display: block;
	margin-bottom: 14px;
}
.proc-step h3 { font-size: 21px; margin-bottom: 11px; letter-spacing: -.024em; }
.proc-step p { font-size: 14.6px; color: var(--swp-slate); line-height: 1.68; }
.proc-step em {
	font-style: normal;
	display: inline-block;
	margin-top: 14px;
	font-size: 12.6px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: var(--r-pill);
	background: var(--swp-mist);
}

/* ============================================================
   18. RECOGNITION
   ============================================================ */
.awards { display: grid; gap: 0; border-top: 1px solid var(--swp-line); }
.award {
	display: grid;
	grid-template-columns: 88px minmax(0, 1.4fr) minmax(0, 1fr) auto;
	gap: clamp(14px, 2vw, 32px);
	align-items: center;
	padding: clamp(20px, 2.2vw, 30px) 0;
	border-bottom: 1px solid var(--swp-line);
	transition: background .35s var(--ease), padding-inline .35s var(--ease);
}
.award:hover { background: var(--swp-shell); padding-inline: 20px; }
.sec-mist .award:hover { background: var(--swp-shell); }
.award-yr {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--swp-slate);
}
.award h3 { font-size: clamp(19px, 1.9vw, 26px); letter-spacing: -.026em; }
.award p { font-size: 14.4px; color: var(--swp-slate); }
.award-tag {
	font-size: 12.4px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: var(--r-pill);
	background: var(--swp-lime);
	white-space: nowrap;
}

@media (max-width: 820px) {
	.award { grid-template-columns: 1fr auto; gap: 8px 16px; }
	.award-yr { order: 1; }
	.award-tag { order: 2; justify-self: end; }
	.award h3 { order: 3; grid-column: 1 / -1; }
	.award p { order: 4; grid-column: 1 / -1; }
}

/* ============================================================
   19. TESTIMONIALS CAROUSEL
   ============================================================ */
.tst { background: var(--swp-mist); }

.swp-carousel { position: relative; }
.swp-track-wrap { overflow: hidden; margin-inline: -8px; padding-inline: 8px; }
.swp-track {
	display: flex;
	gap: clamp(14px, 1.7vw, 22px);
	transition: transform .6s var(--ease);
	will-change: transform;
	cursor: grab;
}
.swp-track.dragging { transition: none; cursor: grabbing; }
.swp-slide { flex: 0 0 auto; min-width: 0; }

.tst-card {
	background: var(--swp-shell);
	border-radius: var(--r-md);
	padding: clamp(24px, 2.4vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 18px;
	height: 100%;
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tst-card:hover { transform: translateY(-5px); box-shadow: 0 28px 56px -40px rgba(16, 17, 16, .6); }
.tst-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.stars { display: flex; gap: 3px; color: var(--swp-ink); }
.tst-quote-ic { color: var(--swp-slate); opacity: .28; }
.tst-card blockquote {
	margin: 0;
	font-size: 15.4px;
	line-height: 1.7;
	border: 0;
	padding: 0;
	font-style: normal;
}
.tst-who {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var(--swp-line);
}
.tst-who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.tst-who .ava-txt {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex: none;
	background: var(--swp-lime);
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 15px;
}
.tst-who b { display: block; font-family: var(--font-display); font-size: 15px; letter-spacing: -.02em; }
.tst-who span { font-size: 12.8px; color: var(--swp-slate); }

/* Carousel controls */
.swp-car-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: clamp(26px, 3vw, 38px);
	flex-wrap: wrap;
}
.swp-car-arrows { display: flex; gap: 9px; }
.swp-car-arrows button {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--swp-shell);
	color: var(--swp-ink);
	display: grid;
	place-items: center;
	box-shadow: inset 0 0 0 1.5px var(--swp-line);
	transition: background .28s var(--ease), color .28s var(--ease), box-shadow .28s var(--ease);
}
.swp-car-arrows button:hover { background: var(--swp-ink); color: var(--swp-lime); box-shadow: none; }
.swp-car-arrows button[disabled] { opacity: .35; cursor: default; }
.swp-car-arrows button[disabled]:hover { background: var(--swp-shell); color: var(--swp-ink); box-shadow: inset 0 0 0 1.5px var(--swp-line); }

.swp-car-dots { display: flex; gap: 8px; align-items: center; }
.swp-car-dots button {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(16, 17, 16, .18);
	transition: width .3s var(--ease), background .3s var(--ease);
}
.swp-car-dots button[aria-current="true"] {
	width: 28px;
	border-radius: var(--r-pill);
	background: var(--swp-ink);
}

/* ============================================================
   20. JOURNAL
   ============================================================ */
.posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: clamp(16px, 1.9vw, 26px);
}
.post { display: flex; flex-direction: column; gap: 18px; }
.post-media {
	border-radius: var(--r-md);
	overflow: hidden;
	aspect-ratio: 16 / 11;
	background: linear-gradient(135deg, var(--swp-mist), var(--swp-line));
	display: block;
}
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.post:hover .post-media img { transform: scale(1.05); }
.post-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.6px;
	color: var(--swp-slate);
	flex-wrap: wrap;
}
.post-meta em {
	font-style: normal;
	font-weight: 600;
	color: var(--swp-ink);
	background: var(--swp-lime);
	padding: 4px 11px;
	border-radius: var(--r-pill);
}
.post h3 { font-size: 20px; letter-spacing: -.024em; line-height: 1.26; }
.post h3 a { transition: color .25s var(--ease); }
.post h3 a:hover { color: var(--swp-lime-deep); }
.post p { font-size: 14.6px; color: var(--swp-slate); line-height: 1.66; }
.post-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	font-family: var(--font-display);
	margin-top: auto;
}
.post-link svg { transition: transform .4s var(--ease); }
.post:hover .post-link svg { transform: translate(3px, -3px); }

/* ============================================================
   21. FAQ
   ============================================================ */
.faq-grid {
	display: grid;
	grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}
.faq-list { border-top: 1px solid var(--swp-line); }
.faq-item { border-bottom: 1px solid var(--swp-line); }
.faq-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 0;
	text-align: left;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(16px, 1.5vw, 19px);
	letter-spacing: -.022em;
}
.faq-q i {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex: none;
	background: var(--swp-mist);
	display: grid;
	place-items: center;
	transition: background .3s var(--ease), transform .4s var(--ease);
}
.faq-item.open .faq-q i { background: var(--swp-lime); transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.faq-a p { padding: 0 60px 24px 0; font-size: 15px; color: var(--swp-slate); line-height: 1.7; }
.faq-aside {
	background: var(--swp-mist);
	border-radius: var(--r-lg);
	padding: clamp(26px, 2.6vw, 36px);
	margin-top: 26px;
}
.sec-mist .faq-aside { background: var(--swp-shell); }
.faq-aside h3 { font-size: 23px; margin-bottom: 12px; letter-spacing: -.026em; }
.faq-aside p { font-size: 14.8px; color: var(--swp-slate); margin-bottom: 24px; }

@media (max-width: 880px) { .faq-grid { grid-template-columns: 1fr; } }

/* ============================================================
   22. CONTACT
   ============================================================ */
.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}
.contact-cards { display: grid; gap: 12px; margin-top: 30px; }
.contact-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border-radius: var(--r-md);
	background: var(--swp-mist);
	transition: background .3s var(--ease), transform .3s var(--ease);
}
.contact-card:hover { transform: translateY(-3px); }
.contact-card i {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--swp-shell);
	display: grid;
	place-items: center;
	flex: none;
	transition: background .3s var(--ease);
}
.contact-card:hover i { background: var(--swp-lime); }
.contact-card span { display: block; }
.contact-card .c-lbl { font-size: 12.4px; color: var(--swp-slate); }
.contact-card .c-val { font-size: 15.4px; font-weight: 600; letter-spacing: -.01em; word-break: break-word; }

.contact-form-wrap {
	background: var(--swp-mist);
	border-radius: var(--r-lg);
	padding: clamp(24px, 3vw, 44px);
}
.contact-map { border-radius: var(--r-lg); overflow: hidden; margin-top: clamp(30px, 3.4vw, 46px); }
.contact-map iframe { width: 100%; height: clamp(280px, 34vw, 420px); border: 0; display: block; }

@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

/* ============================================================
   23. CTA
   ============================================================ */
.cta {
	background: var(--swp-lime);
	border-radius: var(--r-lg);
	padding: clamp(38px, 5vw, 76px);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.cta .eyebrow { color: rgba(16, 17, 16, .6); }
.cta .eyebrow::before, .cta .eyebrow .dot { background: var(--swp-ink); }
.cta h2 { max-width: 18ch; margin: 18px auto 20px; }
.cta p { max-width: 50ch; margin: 0 auto 34px; color: rgba(16, 17, 16, .66); font-size: 16px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(16, 17, 16, .14); }
.cta-ring.a { width: 340px; height: 340px; left: -120px; bottom: -150px; }
.cta-ring.b { width: 240px; height: 240px; right: -70px; top: -90px; }

/* ============================================================
   24. FOOTER
   ============================================================ */
.ftr { background: var(--swp-ink); color: #fff; padding-top: clamp(52px, 5.4vw, 84px); }
.ftr-top {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: clamp(26px, 3vw, 48px);
	padding-bottom: clamp(38px, 4vw, 60px);
}
.ftr-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -.03em;
	margin-bottom: 18px;
	color: #fff;
}
.ftr-brand .brand-mark { color: #fff; }
.ftr-brand img { max-height: 48px; width: auto; }
.ftr-about {
	font-size: 14.6px;
	color: rgba(255, 255, 255, .58);
	line-height: 1.7;
	max-width: 38ch;
	margin-bottom: 24px;
}
.ftr-soc { display: flex; gap: 9px; flex-wrap: wrap; }
.ftr-soc a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2);
	display: grid;
	place-items: center;
	transition: background .28s var(--ease), color .28s var(--ease), box-shadow .28s var(--ease);
}
.ftr-soc a:hover { background: var(--swp-lime); color: var(--swp-ink); box-shadow: inset 0 0 0 1.5px var(--swp-lime); }

.ftr h4,
.ftr .widget-title {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
	margin-bottom: 20px;
}
.ftr-links li { margin-bottom: 11px; }
.ftr-links a { font-size: 14.8px; color: rgba(255, 255, 255, .74); transition: color .25s var(--ease); }
.ftr-links a:hover { color: var(--swp-lime); }

.ftr-cbox { display: flex; gap: 11px; margin-bottom: 16px; align-items: flex-start; }
.ftr-cbox svg { color: var(--swp-lime); margin-top: 3px; }
.ftr-cbox span { font-size: 14.4px; color: rgba(255, 255, 255, .74); line-height: 1.6; }
.ftr-cbox a:hover { color: var(--swp-lime); }

.ftr-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(24px, 3vw, 44px);
	padding-bottom: clamp(30px, 3.4vw, 48px);
}
.ftr .widget ul li { margin-bottom: 10px; font-size: 14.6px; color: rgba(255, 255, 255, .74); }
.ftr .widget a { color: rgba(255, 255, 255, .74); }
.ftr .widget a:hover { color: var(--swp-lime); }

/*
 * padding-block, never the `padding` shorthand: .ftr-bot is also a .wrap, and a
 * shorthand here would reset the inline padding that centres the container.
 */
.ftr-bot {
	border-top: 1px solid rgba(255, 255, 255, .13);
	padding-block: 24px 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13.4px;
	color: rgba(255, 255, 255, .5);
}
.ftr-bot nav ul,
.ftr-bot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.ftr-bot a:hover { color: var(--swp-lime); }

@media (max-width: 900px) { .ftr-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr-top { grid-template-columns: 1fr; } }

/* ============================================================
   25. BACK TO TOP
   ============================================================ */
.totop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 70;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--swp-ink);
	color: var(--swp-lime);
	display: grid;
	place-items: center;
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px);
	transition: opacity .35s var(--ease), transform .35s var(--ease);
	box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .9);
	border: 0;
}
.totop.on { opacity: 1; pointer-events: auto; transform: none; }

/* ============================================================
   26. SCROLL POP-UP
   ============================================================ */
.swp-popup {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 20px;
	background: var(--popup-overlay, rgba(16, 17, 16, .68));
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s var(--ease), visibility .4s;
}
/* The `hidden` attribute keeps it out of the a11y tree until it is opened. */
.swp-popup[hidden] { display: none; }
.swp-popup.open { opacity: 1; visibility: visible; }

.swp-popup-box {
	width: min(var(--popup-w, 880px), 100%);
	max-height: calc(100vh - 40px);
	background: var(--swp-shell);
	border-radius: var(--r-lg);
	display: grid;
	overflow: hidden;
	position: relative;
	transform: translateY(22px) scale(.98);
	transition: transform .45s var(--ease);
	box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .8);
}
.swp-popup.is-split .swp-popup-box { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
.swp-popup.is-split.img-right .swp-popup-box { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
.swp-popup.is-split.img-right .swp-popup-media { order: 2; }
.swp-popup.open .swp-popup-box { transform: none; }

.swp-popup-media { background: var(--swp-mist); }
.swp-popup-media img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
.swp-popup-body { padding: clamp(26px, 3vw, 44px); overflow-y: auto; }
.swp-popup-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.swp-popup-alt {
	font-size: 14px;
	font-weight: 600;
	font-family: var(--font-display);
	color: var(--swp-slate);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.swp-popup-alt:hover { color: var(--swp-ink); }
.swp-popup-body h3 { font-size: clamp(23px, 2.4vw, 32px); margin: 14px 0 14px; letter-spacing: -.028em; }
.swp-popup-body p { font-size: 15px; color: var(--swp-slate); line-height: 1.7; margin-bottom: 24px; }
.swp-popup-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--swp-mist);
	color: var(--swp-ink);
	display: grid;
	place-items: center;
	z-index: 2;
	transition: background .28s var(--ease), color .28s var(--ease);
}
.swp-popup-close:hover { background: var(--swp-ink); color: var(--swp-lime); }
.swp-popup-note { font-size: 12.6px; color: var(--swp-slate); margin-top: 14px; }

@media (max-width: 700px) {
	.swp-popup.is-split .swp-popup-box,
	.swp-popup.is-split.img-right .swp-popup-box { grid-template-columns: 1fr; }
	.swp-popup-media { display: none; }
}

/* ============================================================
   27. PAGE BANNER
   ============================================================ */
.page-banner {
	background: var(--swp-mist);
	padding: clamp(50px, 6vw, 96px) 0 clamp(46px, 5.4vw, 86px);
	position: relative;
	background-size: cover;
	background-position: center;
}
.page-banner.has-image { color: #fff; }
.page-banner.has-image .crumbs,
.page-banner.has-image .lead { color: rgba(255, 255, 255, .78); }
.page-banner.has-image .crumbs a:hover { color: var(--swp-lime); }
.page-banner h1 {
	font-size: calc(clamp(34px, 5.2vw, 62px) * var(--h-scale));
	letter-spacing: -.036em;
	line-height: 1.03;
	max-width: 22ch;
}
.page-banner .crumbs {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--swp-slate);
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.page-banner .crumbs a { transition: color .25s var(--ease); }
.page-banner .crumbs a:hover { color: var(--swp-lime-deep); }
.page-banner .lead { margin-top: 16px; max-width: 56ch; }

/* ============================================================
   28. BLOG / ARCHIVE / SINGLE
   ============================================================ */
.blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(30px, 4vw, 60px);
}
.blog-layout.has-sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
@media (max-width: 980px) { .blog-layout.has-sidebar { grid-template-columns: 1fr; } }

.blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
}

.entry-content { font-size: 16.4px; line-height: 1.78; color: var(--swp-graphite); }
.entry-content > * + * { margin-top: 1.15em; }
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
	margin-top: 1.7em;
	color: var(--swp-ink);
}
.entry-content h2 { font-size: calc(30px * var(--h-scale)); }
.entry-content h3 { font-size: calc(24px * var(--h-scale)); }
.entry-content h4 { font-size: calc(20px * var(--h-scale)); }
.entry-content a { color: var(--swp-ink); text-decoration: underline; text-decoration-color: var(--swp-lime-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--swp-lime-deep); }
.entry-content ul, .entry-content ol { padding-left: 22px; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: .5em; }
.entry-content img, .entry-content figure img { border-radius: var(--r-md); }
.entry-content figure { margin: 1.8em 0; }
.entry-content figcaption { font-size: 13.4px; color: var(--swp-slate); margin-top: 10px; text-align: center; }
.entry-content blockquote {
	margin: 1.8em 0;
	padding: 24px 28px;
	background: var(--swp-mist);
	border-left: 3px solid var(--swp-lime);
	border-radius: var(--r-sm);
	font-size: 18px;
	font-style: italic;
}
.entry-content blockquote p + p { margin-top: .8em; }
.entry-content blockquote cite { display: block; font-size: 14px; font-style: normal; color: var(--swp-slate); margin-top: 12px; }
.entry-content pre {
	background: var(--swp-ink);
	color: #E8EDD8;
	padding: 22px;
	border-radius: var(--r-md);
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.6;
}
.entry-content code {
	background: var(--swp-mist);
	padding: 2px 7px;
	border-radius: 5px;
	font-size: .92em;
}
.entry-content pre code { background: none; padding: 0; color: inherit; }
.entry-content hr { border: 0; border-top: 1px solid var(--swp-line); margin: 2.4em 0; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.entry-content th, .entry-content td { padding: 12px 14px; border: 1px solid var(--swp-line); text-align: left; }
.entry-content th { background: var(--swp-mist); font-family: var(--font-display); }
.entry-content dt { font-weight: 600; }
.entry-content dd { margin: 0 0 1em 20px; }

.single-hero { border-radius: var(--r-lg); overflow: hidden; margin-bottom: clamp(26px, 3vw, 40px); }
.entry-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 13.4px;
	color: var(--swp-slate);
	margin-bottom: 26px;
}
.entry-meta .item { display: inline-flex; align-items: center; gap: 7px; }
.entry-meta a:hover { color: var(--swp-ink); }

.entry-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 34px; }
.entry-tags a {
	font-size: 12.8px;
	padding: 7px 14px;
	border-radius: var(--r-pill);
	background: var(--swp-mist);
	transition: background .28s var(--ease), color .28s var(--ease);
}
.entry-tags a:hover { background: var(--swp-ink); color: var(--swp-lime); }

.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: clamp(34px, 4vw, 52px);
	padding-top: clamp(26px, 3vw, 38px);
	border-top: 1px solid var(--swp-line);
}
.post-nav a {
	display: block;
	padding: 20px 22px;
	border-radius: var(--r-md);
	background: var(--swp-mist);
	transition: background .3s var(--ease);
}
.post-nav a:hover { background: var(--swp-line); }
.post-nav span {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--swp-slate);
	font-family: var(--font-display);
	margin-bottom: 8px;
}
.post-nav b { font-family: var(--font-display); font-size: 16.4px; letter-spacing: -.02em; line-height: 1.3; }
.post-nav .nxt { text-align: right; }
@media (max-width: 620px) { .post-nav { grid-template-columns: 1fr; } .post-nav .nxt { text-align: left; } }

.author-box {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: clamp(22px, 2.6vw, 32px);
	border-radius: var(--r-lg);
	background: var(--swp-mist);
	margin-top: clamp(34px, 4vw, 52px);
}
.author-box img { width: 72px; height: 72px; border-radius: 50%; flex: none; }
.author-box h4 { font-size: 19px; margin-bottom: 8px; }
.author-box p { font-size: 14.6px; color: var(--swp-slate); line-height: 1.7; }

.no-results { padding: clamp(40px, 5vw, 70px) 0; text-align: center; }
.no-results h2 { font-size: calc(30px * var(--h-scale)); margin-bottom: 14px; }
.no-results p { color: var(--swp-slate); margin-bottom: 26px; }
.no-results .search-form { justify-content: center; }

/* Search form (generic) */
.search-form { display: flex; gap: 10px; max-width: 460px; }
.search-form label { flex: 1; }
.search-field {
	width: 100%;
	padding: 14px 20px;
	border-radius: var(--r-pill);
	border: 1.5px solid var(--swp-line);
	background: var(--swp-shell);
	font: inherit;
	font-size: 15px;
	color: var(--swp-ink);
}
.search-field:focus { outline: none; border-color: var(--swp-ink); }
.search-submit {
	padding: 0 26px;
	border-radius: var(--r-pill);
	background: var(--swp-ink);
	color: var(--swp-lime);
	font-family: var(--font-display);
	font-weight: 600;
	cursor: pointer;
}

/* 404 */
/* padding-block only — .err-404 is also a .wrap (see .ftr-bot). */
.err-404 { text-align: center; padding-block: clamp(50px, 7vw, 110px); }
.err-404 .code {
	font-family: var(--font-display);
	font-size: clamp(90px, 18vw, 220px);
	font-weight: 700;
	line-height: .85;
	letter-spacing: -.06em;
	color: var(--swp-lime);
	-webkit-text-stroke: 2px var(--swp-ink);
}
.err-404 h1 { font-size: calc(clamp(28px, 3.6vw, 46px) * var(--h-scale)); margin: 20px 0 16px; }
.err-404 p { color: var(--swp-slate); max-width: 46ch; margin: 0 auto 30px; }
.err-404 .search-form { margin: 0 auto 26px; }

/* ============================================================
   29. COMMENTS
   ============================================================ */
.comments-area { margin-top: clamp(40px, 5vw, 66px); padding-top: clamp(30px, 3.4vw, 44px); border-top: 1px solid var(--swp-line); }
.comments-title, .comment-reply-title { font-size: calc(26px * var(--h-scale)); margin-bottom: 26px; }
.comment-list { display: grid; gap: 22px; }
.comment-list ol { list-style: none; padding-left: clamp(16px, 3vw, 42px); margin-top: 22px; display: grid; gap: 22px; }
.comment-body {
	padding: 22px 24px;
	border-radius: var(--r-md);
	background: var(--swp-mist);
}
.comment-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.comment-author { display: flex; align-items: center; gap: 12px; }
.comment-author img { border-radius: 50%; }
.comment-author .fn { font-family: var(--font-display); font-weight: 700; font-style: normal; font-size: 15.4px; }
.comment-metadata { font-size: 12.6px; color: var(--swp-slate); }
.comment-content { font-size: 15px; line-height: 1.72; color: var(--swp-graphite); }
.comment-content p + p { margin-top: .8em; }
.reply { margin-top: 12px; }
.reply a, .comment-reply-link {
	font-size: 12.8px;
	font-weight: 600;
	font-family: var(--font-display);
	padding: 6px 14px;
	border-radius: var(--r-pill);
	background: var(--swp-shell);
	display: inline-block;
	transition: background .28s var(--ease), color .28s var(--ease);
}
.reply a:hover { background: var(--swp-ink); color: var(--swp-lime); }
.comment-respond { margin-top: clamp(30px, 3.4vw, 46px); }
.comment-form { display: grid; gap: 16px; }
.comment-form p { display: grid; gap: 8px; }
.comment-form label { font-size: 13.4px; font-weight: 600; font-family: var(--font-display); }
.comment-form .comment-form-cookies-consent { grid-template-columns: auto 1fr; align-items: center; }
.comment-notes { font-size: 13.6px; color: var(--swp-slate); }

input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="number"], input[type="password"], input[type="date"], select, textarea {
	width: 100%;
	padding: 14px 18px;
	border: 1.5px solid var(--swp-line);
	border-radius: var(--r-sm);
	background: var(--swp-shell);
	font: inherit;
	font-size: 15px;
	color: var(--swp-ink);
	transition: border-color .25s var(--ease);
}
textarea { min-height: 150px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--swp-ink); }

input[type="submit"], button[type="submit"], .wp-block-button__link {
	background: var(--swp-ink);
	color: #fff;
	padding: 15px 32px;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	border: 0;
	transition: background .3s var(--ease), transform .3s var(--ease);
	justify-self: start;
}
input[type="submit"]:hover, button[type="submit"]:hover { background: var(--swp-graphite); transform: translateY(-2px); }

/* ============================================================
   30. SIDEBAR & WIDGETS
   ============================================================ */
.sidebar { display: grid; gap: 22px; align-content: start; }
.sidebar .widget {
	padding: 26px;
	border-radius: var(--r-lg);
	background: var(--swp-mist);
}
.sidebar .widget-title {
	font-family: var(--font-display);
	font-size: 17px;
	letter-spacing: -.02em;
	margin-bottom: 18px;
	font-weight: 700;
}
.sidebar .widget ul li {
	padding: 9px 0;
	border-bottom: 1px solid var(--swp-line);
	font-size: 14.8px;
}
.sidebar .widget ul li:last-child { border-bottom: 0; }
.sidebar .widget a { transition: color .25s var(--ease); }
.sidebar .widget a:hover { color: var(--swp-lime-deep); }
.sidebar .widget ul ul { padding-left: 16px; }
.wp-block-tag-cloud a, .tagcloud a {
	display: inline-block;
	font-size: 13px !important;
	padding: 6px 13px;
	border-radius: var(--r-pill);
	background: var(--swp-shell);
	margin: 0 5px 7px 0;
}
.wp-block-tag-cloud a:hover, .tagcloud a:hover { background: var(--swp-ink); color: var(--swp-lime); }
.wp-calendar-table { width: 100%; font-size: 13.6px; }
.wp-calendar-table th, .wp-calendar-table td { padding: 5px; text-align: center; }

/* ============================================================
   31. PAGINATION
   ============================================================ */
.pagination, .navigation.pagination {
	display: flex;
	justify-content: center;
	margin-top: clamp(34px, 4vw, 54px);
}
.pagination .nav-links, .nav-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.page-numbers {
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border-radius: var(--r-pill);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	box-shadow: inset 0 0 0 1.5px var(--swp-line);
	transition: background .28s var(--ease), color .28s var(--ease), box-shadow .28s var(--ease);
}
.page-numbers:hover { box-shadow: inset 0 0 0 1.5px var(--swp-ink); }
.page-numbers.current {
	background: var(--swp-ink);
	color: #fff;
	box-shadow: inset 0 0 0 1.5px var(--swp-ink);
}
.page-numbers.dots { box-shadow: none; }
.page-numbers svg { width: 16px; height: 16px; }

/* ============================================================
   32. CONTACT FORM 7
   ============================================================ */
.wpcf7 form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 18px;
	border: 0;
	border-radius: var(--r-sm);
	background: var(--swp-shell);
	border-left: 3px solid var(--swp-lime);
	font-size: 14.4px;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { border-left-color: #D9534F; }
.wpcf7 form.sent .wpcf7-response-output { border-left-color: #3FA34D; }
.wpcf7-not-valid-tip { font-size: 12.6px; color: #C0392B; margin-top: 6px; }
.wpcf7-spinner { margin-left: 14px; }

.swp-cf7 .row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}
.swp-cf7 .field { display: grid; gap: 8px; margin-bottom: 16px; }
.swp-cf7 .row .field { margin-bottom: 0; }
/*
 * Contact Form 7 wraps every tag in its own <p> (wpautop), so the field's
 * label and control end up siblings inside that paragraph rather than inside
 * .field. The <p> therefore has to be the grid, not just .field.
 */
.swp-cf7 .field > p,
.swp-cf7 .field { display: grid; gap: 8px; }
.swp-cf7 .field > p { margin: 0; }
.swp-cf7 p:empty { display: none; }

.swp-cf7 label {
	font-size: 12.6px;
	font-weight: 600;
	font-family: var(--font-display);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--swp-slate);
}
.swp-cf7 .wpcf7-form-control-wrap { display: block; }
.swp-cf7 br { display: none; }

/* Acceptance / checkbox rows read as a sentence, not a label above a box. */
.swp-cf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.swp-cf7 .wpcf7-acceptance label {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	color: var(--swp-slate);
	line-height: 1.55;
}
.swp-cf7 input[type="checkbox"],
.swp-cf7 input[type="radio"] { width: auto; margin: 3px 0 0; flex: none; }
.swp-cf7 input[type="submit"] {
	margin-top: 6px;
	background: var(--swp-ink);
	color: var(--swp-lime);
	padding: 16px 36px;
}
.swp-cf7 input[type="submit"]:hover { background: var(--swp-graphite); }
@media (max-width: 620px) { .swp-cf7 .row { grid-template-columns: 1fr; } }

/* Newsletter / inline CF7 (pill layout) */
.swp-cf7-inline form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}
.swp-cf7-inline .wpcf7-form-control-wrap { flex: 1 1 240px; }
.swp-cf7-inline input[type="email"], .swp-cf7-inline input[type="text"] {
	border-radius: var(--r-pill);
	padding: 15px 24px;
}
.swp-cf7-inline input[type="submit"] {
	background: var(--swp-ink);
	color: var(--swp-lime);
	padding: 15px 30px;
}
.swp-cf7-inline p { margin: 0; display: contents; }

/* ============================================================
   33. WORDPRESS CORE & BLOCK EDITOR
   ============================================================ */
.alignleft { float: left; margin: .4em 1.6em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.6em; }
.aligncenter { margin-left: auto; margin-right: auto; clear: both; }
.alignwide { width: min(1180px, 100%); margin-left: auto; margin-right: auto; }
.alignfull { width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13.4px; color: var(--swp-slate); text-align: center; margin-top: 8px; }
.gallery { display: flex; flex-wrap: wrap; gap: 10px; }
.gallery-item { margin: 0; }
.gallery-item img { border-radius: var(--r-sm); }
.sticky .post-meta em::after { content: " ★"; }
.bypostauthor { display: block; }

.wp-block-button__link { display: inline-block; text-decoration: none; }
.is-style-swp-portfolio-pro-outline-button .wp-block-button__link {
	background: transparent;
	color: var(--swp-ink);
	box-shadow: inset 0 0 0 1.5px var(--swp-ink);
}
.is-style-swp-portfolio-pro-shadow-image img {
	border-radius: var(--r-md);
	box-shadow: 0 34px 66px -44px rgba(16, 17, 16, .7);
}
.wp-block-separator { border: 0; border-top: 1px solid var(--swp-line); }
.wp-block-quote { border-left: 3px solid var(--swp-lime); padding-left: 22px; }
.wp-block-pullquote { border-top: 2px solid var(--swp-ink); border-bottom: 2px solid var(--swp-ink); padding: 26px 0; }
.wp-block-image figcaption { text-align: center; }
.wp-block-embed iframe { max-width: 100%; border-radius: var(--r-md); }
.wp-block-cover { border-radius: var(--r-lg); overflow: hidden; }

/* ============================================================
   34. ICON CENTRING
   Every round/square icon holder in one place, using explicit flex
   centring rather than the `place-items` shorthand — a glyph that is
   a few pixels off inside a 42px circle is very visible.
   ============================================================ */
.btn > i,
.hdr-search,
.burger,
.hero-social a,
.stack-more,
.cbox i,
.vid .vid-btn i,
.about-list i,
.svc-ic,
.work-go,
.faq-q i,
.tst-who .ava-txt,
.contact-card i,
.ftr-soc a,
.totop,
.swp-popup-close,
.swp-search-close,
.swp-lightbox-close,
.mnav-toggle,
.swp-car-arrows button {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* The glyph itself must not pick up baseline space from its holder. */
.btn > i > svg,
.hdr-search > svg,
.burger > svg,
.hero-social a > svg,
.cbox i > svg,
.vid .vid-btn i > svg,
.about-list i > svg,
.svc-ic > svg,
.work-go > svg,
.faq-q i > svg,
.contact-card i > svg,
.ftr-soc a > svg,
.totop > svg,
.swp-popup-close > svg,
.swp-search-close > svg,
.swp-lightbox-close > svg,
.mnav-toggle > svg,
.swp-car-arrows button > svg {
	display: block;
	margin: 0;
	flex: none;
}

/* ============================================================
   35. ACCESSIBILITY & REDUCED MOTION
   ============================================================ */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: var(--swp-shell);
	clip-path: none;
	color: var(--swp-ink);
	display: block;
	font-size: 15px;
	font-weight: 700;
	height: auto;
	left: 16px;
	line-height: normal;
	padding: 15px 23px;
	text-decoration: none;
	top: 16px;
	width: auto;
	z-index: 100000;
	border-radius: var(--r-sm);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, .1);
}

.skip-link:focus { z-index: 100001; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	html { scroll-behavior: auto; }
	html.js .rev { opacity: 1; transform: none; }
}