/*
Theme Name: Softform
Theme URI: https://softform.duskengineering.services/
Author: Dusk Engineering
Author URI: https://duskengineering.services/
Description: A neumorphic theme for design studios and agencies. The whole home page, header, footer, colours, font, shadow depth, dark mode, estimator pricing and contact form are edited in Appearance → Customize with live preview. Also works with the Site Editor, with patterns and blocks for building further pages.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: softform
Tags: full-site-editing, block-patterns, block-styles, style-variations, custom-colors, editor-style, portfolio, wide-blocks, translation-ready
*/

/* ---------- Base ---------- */
:where(.sf-site-header, .sf-site-footer, .sf-section, .sf-projects, .sf-estimator, .sf-contact-form, .sf-hero-art, .sf-pop-art),
:where(.sf-site-header, .sf-site-footer, .sf-section, .sf-projects, .sf-estimator, .sf-contact-form, .sf-hero-art, .sf-pop-art) *,
:where(.sf-site-header, .sf-site-footer, .sf-section, .sf-projects, .sf-estimator, .sf-contact-form, .sf-hero-art, .sf-pop-art) *::before,
:where(.sf-site-header, .sf-site-footer, .sf-section, .sf-projects, .sf-estimator, .sf-contact-form, .sf-hero-art, .sf-pop-art) *::after { box-sizing: border-box; }
:root {
	--sf-radius: 26px;
	--sf-ease: cubic-bezier(.2, .8, .2, 1);
	--sf-raised: var(--wp--preset--shadow--raised);
	--sf-raised-sm: var(--wp--preset--shadow--raised-sm);
	--sf-inset: var(--wp--preset--shadow--inset);
	--sf-inset-sm: var(--wp--preset--shadow--inset-sm);
}
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { -webkit-font-smoothing: antialiased; transition: background-color .4s, color .4s; }
.wp-site-blocks { overflow-x: clip; }
.wp-site-blocks > * + * { margin-block-start: 0; }
:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
.sf-svg { display: block; flex: none; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Italic words in headings become gradient text. */
:where(h1, h2, h3, h4, .wp-block-post-title, .wp-block-site-title) em {
	font-style: normal;
	background: var(--wp--preset--gradient--accent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- Header / navigation ---------- */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 16px; z-index: 50; margin-top: 16px; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 48px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 62px; } }
@media (max-width: 600px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 16px; } }

.wp-block-site-title a { color: inherit; text-decoration: none; }
.sf-brand:not(:has(.wp-block-site-logo)) .wp-block-site-title::before {
	content: '';
	display: inline-block;
	width: 38px;
	height: 38px;
	margin-right: 12px;
	vertical-align: middle;
	border-radius: 50%;
	box-shadow: var(--sf-raised-sm);
	background: radial-gradient(circle at 42% 42%, var(--wp--preset--color--accent-2) 0, var(--wp--preset--color--accent) 7px, transparent 8.5px);
}
.wp-block-navigation .wp-block-navigation-item__content { padding: 10px 16px; border-radius: 999px; color: var(--wp--preset--color--muted); text-decoration: none; transition: box-shadow .25s, color .25s; }
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--contrast); box-shadow: var(--sf-inset-sm); }
.wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--contrast) !important; padding: 2rem; }
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--wp--preset--color--base); box-shadow: var(--sf-raised-sm); color: var(--wp--preset--color--contrast); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.3rem; }
@media (max-width: 600px) { .sf-header-cta { display: none !important; } }

/* ---------- Buttons ---------- */
.wp-element-button, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; line-height: 1.1; text-decoration: none; cursor: pointer; transition: box-shadow .25s, transform .25s, color .25s; }
.wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-2px); }
.wp-element-button:active, .wp-block-button__link:active { transform: none; box-shadow: inset 4px 4px 10px rgba(0, 0, 0, .25); }
.wp-element-button:disabled { opacity: .6; cursor: progress; transform: none; }
.wp-block-button.is-style-neo .wp-block-button__link { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); box-shadow: var(--sf-raised-sm); }
.wp-block-button.is-style-neo .wp-block-button__link:hover { color: var(--wp--preset--color--accent); }
.wp-block-button.is-style-neo .wp-block-button__link:active { box-shadow: var(--sf-inset-sm); }

/* ---------- Block styles ---------- */
.is-style-neo-raised, .is-style-neo-press, .is-style-neo-inset { border-radius: var(--sf-radius); padding: clamp(1.5rem, 3vw, 2.25rem); transition: box-shadow .35s, background-color .4s; }
.is-style-neo-raised, .is-style-neo-press { background-color: var(--wp--preset--color--base); box-shadow: var(--sf-raised); }
.is-style-neo-press:hover { box-shadow: var(--sf-inset); }
.is-style-neo-inset { box-shadow: var(--sf-inset); }
.is-style-neo-pill { background-color: var(--wp--preset--color--base); box-shadow: var(--sf-raised); border-radius: 999px; padding: 10px 10px 10px 22px; }

p.is-style-eyebrow { display: flex; align-items: center; gap: 8px; width: fit-content; padding: 7px 16px; border-radius: 999px; box-shadow: var(--sf-inset-sm); color: var(--wp--preset--color--accent); font-size: 12.5px; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
p.is-style-eyebrow.has-text-align-center { margin-inline: auto; }
.sf-pulse::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: sf-pulse 2s infinite; }
@keyframes sf-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } }
p.is-style-pill { width: fit-content; margin: 0; padding: 14px 26px; border-radius: 999px; box-shadow: var(--sf-inset-sm); color: var(--wp--preset--color--muted); font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
p.is-style-chip { width: fit-content; margin: 0; padding: 5px 12px; border-radius: 999px; box-shadow: var(--sf-raised-sm); color: var(--wp--preset--color--muted); font-size: 13px; font-weight: 600; line-height: 1.5; }
p.is-style-step { position: relative; display: grid; place-items: center; width: 86px; height: 86px; margin: 0 auto 1rem; border-radius: 50%; background: var(--wp--preset--color--base); box-shadow: var(--sf-raised); color: var(--wp--preset--color--accent); font-size: 1.6rem; font-weight: 800; line-height: 1; }
p.is-style-step::before { content: ''; position: absolute; inset: 13px; border-radius: 50%; box-shadow: var(--sf-inset-sm); }
p.is-style-avatar { display: grid; place-items: center; flex: none; width: 50px; height: 50px; margin: 0; padding: 0; border-radius: 50%; background: var(--wp--preset--gradient--accent); box-shadow: var(--sf-raised-sm); color: #fff; font-size: 15px; font-weight: 700; line-height: 1; }
.sf-avatars p.is-style-avatar { width: 44px; height: 44px; margin-left: -12px; border: 4px solid var(--wp--preset--color--base); font-size: 13px; }
.sf-avatars p.is-style-avatar:first-child { margin-left: 0; }
p.is-style-quote-mark { display: grid; place-items: center; width: 52px; height: 52px; margin: 0; padding-top: 14px; border-radius: 16px; box-shadow: var(--sf-inset-sm); color: var(--wp--preset--color--accent); font-size: 36px; font-weight: 800; line-height: 1; }
.is-style-counter { font-variant-numeric: tabular-nums; }

.is-style-neo-frame { padding: 14px; border-radius: 22px; box-shadow: var(--sf-inset); }
.is-style-neo-frame img, .is-style-neo-frame .wp-block-post-featured-image__overlay { border-radius: 12px; }

.wp-block-details.is-style-neo { padding: 0; border-radius: 22px; box-shadow: var(--sf-raised-sm); transition: box-shadow .3s; }
.wp-block-details.is-style-neo[open] { box-shadow: var(--sf-inset-sm); }
.wp-block-details.is-style-neo summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; cursor: pointer; font-size: 1.05rem; font-weight: 700; list-style: none; }
.wp-block-details.is-style-neo summary::-webkit-details-marker { display: none; }
.wp-block-details.is-style-neo summary::after { content: '+'; display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: var(--sf-raised-sm); color: var(--wp--preset--color--accent); font-size: 22px; font-weight: 600; line-height: 1; transition: transform .3s; }
.wp-block-details.is-style-neo[open] summary::after { transform: rotate(45deg); }
.wp-block-details.is-style-neo > :not(summary) { margin: 0 26px 24px; color: var(--wp--preset--color--muted); }

.wp-block-quote.is-style-neo { padding: clamp(1.5rem, 3vw, 2.25rem); border: 0; border-radius: var(--sf-radius); box-shadow: var(--sf-raised); }
.wp-block-quote.is-style-neo cite { color: var(--wp--preset--color--muted); font-style: normal; }
.wp-block-social-links.is-style-neo .wp-social-link { background: var(--wp--preset--color--base) !important; box-shadow: var(--sf-raised-sm); color: var(--wp--preset--color--contrast) !important; }
.wp-block-social-links.is-style-neo .wp-social-link a { padding: .5em; }

/* ---------- Forms (comments, search, contact) ---------- */
:where(input:not([type]), input[type=text], input[type=email], input[type=url], input[type=search], input[type=password], input[type=tel], input[type=number], select, textarea):where(:not(#wpadminbar *)) {
	width: 100%;
	border: 0;
	border-radius: 16px;
	padding: 14px 18px;
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--sf-inset-sm);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	transition: box-shadow .25s;
}
:where(input, select, textarea):focus { outline: none; box-shadow: var(--sf-inset-sm), 0 0 0 2px var(--wp--preset--color--accent); }
::placeholder { color: var(--wp--preset--color--muted); opacity: .7; }
.wp-block-search__inside-wrapper { border: 0 !important; gap: 10px; }
.wp-block-search__input { border-radius: 999px !important; }

/* ---------- Layout helpers used by patterns ---------- */
.sf-steps { position: relative; }
.sf-steps::before { content: ''; position: absolute; top: 38px; left: 12.5%; right: 12.5%; height: 10px; border-radius: 999px; box-shadow: var(--sf-inset-sm); }
@media (max-width: 1000px) { .sf-steps::before { display: none; } }
.sf-steps > * { text-align: center; }

/* ---------- Icon block ---------- */
.wp-block-softform-icon { display: grid; place-items: center; width: fit-content; color: var(--wp--preset--color--accent); font-size: calc(var(--sf-size, 64px) * .42); }
.wp-block-softform-icon.sf-icon-tile { width: var(--sf-size, 64px); height: var(--sf-size, 64px); border-radius: 30%; box-shadow: var(--sf-inset-sm); transition: box-shadow .35s, color .35s; }
.is-style-neo-press:hover .sf-icon-tile:not(.has-text-color) { box-shadow: var(--sf-raised-sm); color: var(--wp--preset--color--accent-2); }

/* ---------- Theme toggle ---------- */
.sf-theme-toggle { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--wp--preset--color--base); box-shadow: var(--sf-raised-sm); color: var(--wp--preset--color--contrast); font-size: 22px; cursor: pointer; transition: box-shadow .25s, color .25s; }
.sf-theme-toggle:hover { color: var(--wp--preset--color--accent); }
.sf-theme-toggle:active { box-shadow: var(--sf-inset-sm); }
.sf-theme-toggle .sf-moon, [data-theme="dark"] .sf-theme-toggle .sf-sun { display: none; }
[data-theme="dark"] .sf-theme-toggle .sf-moon { display: block; }

/* ---------- Hero artwork ---------- */
.sf-hero-art { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1; margin-inline: auto; transform: perspective(1000px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .4s ease-out; }
.sf-orb { position: absolute; inset: 7%; border-radius: 50%; box-shadow: var(--sf-raised); }
.sf-orb-ring { position: absolute; inset: 13%; border-radius: 50%; box-shadow: var(--sf-inset); }
.sf-orb-core { position: absolute; inset: 22%; border-radius: 50%; background: var(--wp--preset--gradient--accent); box-shadow: 14px 14px 30px var(--wp--preset--color--shade), -10px -10px 24px var(--wp--preset--color--highlight), inset 6px 6px 16px rgba(255, 255, 255, .3), inset -8px -8px 20px rgba(0, 0, 0, .15); animation: sf-breathe 7s ease-in-out infinite; }
@keyframes sf-breathe { 50% { transform: scale(1.05) rotate(8deg); } }
.sf-browser { position: absolute; left: -2%; bottom: 10%; width: 60%; padding: 14px; border-radius: 22px; background: var(--wp--preset--color--base); box-shadow: var(--sf-raised); }
.sf-browser-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.sf-browser-bar i { width: 10px; height: 10px; border-radius: 50%; box-shadow: var(--sf-inset-sm); }
.sf-browser-bar i:nth-child(1) { background: #ff8a8a; }
.sf-browser-bar i:nth-child(2) { background: #ffd36b; }
.sf-browser-bar i:nth-child(3) { background: #6ee7a8; }
.sf-browser-bar span { flex: 1; height: 16px; margin-left: 8px; border-radius: 999px; box-shadow: var(--sf-inset-sm); }
.sf-browser-body { padding: 14px; border-radius: 14px; box-shadow: var(--sf-inset-sm); }
.sf-sk { height: 10px; margin-bottom: 9px; border-radius: 6px; background: var(--wp--preset--color--shade); opacity: .55; }
.sf-sk-title { width: 72%; height: 16px; background: var(--wp--preset--gradient--accent); opacity: .85; }
.sf-sk-short { width: 52%; }
.sf-sk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.sf-sk-row div { aspect-ratio: 1; border-radius: 10px; box-shadow: var(--sf-raised-sm); }
.sf-chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 18px; background: var(--wp--preset--color--base); box-shadow: var(--sf-raised-sm); font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.sf-chip small { display: block; color: var(--wp--preset--color--muted); font-size: 12px; font-weight: 500; }
.sf-chip-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; box-shadow: var(--sf-inset-sm); color: var(--wp--preset--color--accent); font-size: 17px; }
.sf-chip-1 { top: 6%; right: -2%; animation-delay: -2s; }
.sf-chip-2 { top: 26%; left: -4%; animation-delay: -4s; }
.sf-knob { position: absolute; right: 4%; bottom: 4%; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--wp--preset--color--base); box-shadow: var(--sf-raised); animation-duration: 8s; }
.sf-knob div { position: relative; width: 62px; height: 62px; border-radius: 50%; box-shadow: var(--sf-inset-sm); animation: sf-spin 12s linear infinite; }
.sf-knob div::after { content: ''; position: absolute; top: 8px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--wp--preset--color--accent-2); box-shadow: 0 0 10px var(--wp--preset--color--accent-2); }
@keyframes sf-spin { to { transform: rotate(360deg); } }
.sf-float { animation: sf-float 6s ease-in-out infinite; }
@keyframes sf-float { 50% { transform: translateY(-14px); } }
@media (max-width: 640px) {
	.sf-chip { padding: 9px 12px; font-size: 12px; }
	.sf-chip-dot { width: 26px; height: 26px; }
	.sf-chip-1 { right: 0; }
	.sf-chip-2 { left: 0; }
}

/* ---------- Projects grid ---------- */
.sf-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: fit-content; max-width: 100%; margin: 0 auto 50px; padding: 8px; border-radius: 999px; box-shadow: var(--sf-inset-sm); }
.sf-filters button { padding: 12px 22px; border: 0; border-radius: 999px; background: var(--wp--preset--color--base); color: var(--wp--preset--color--muted); font: 600 15px/1 inherit; cursor: pointer; transition: box-shadow .25s, color .25s; }
.sf-filters button[aria-pressed="true"] { box-shadow: var(--sf-raised-sm); color: var(--wp--preset--color--accent); }
.sf-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(min(17rem, 100%), calc((100% - (var(--sf-cols, 3) - 1) * 30px) / var(--sf-cols, 3))), 1fr)); gap: 30px; }
.sf-project { padding: 16px; border-radius: var(--sf-radius); background: var(--wp--preset--color--base); box-shadow: var(--sf-raised); animation: sf-pop .45s ease both; }
@keyframes sf-pop { from { opacity: 0; transform: scale(.96); } }
.sf-thumb { display: block; aspect-ratio: 4 / 3; padding: 14px; overflow: hidden; border-radius: 18px; box-shadow: var(--sf-inset); }
.sf-thumb img, .sf-screen { display: block; width: 100%; height: 100%; border-radius: 12px; object-fit: cover; object-position: top center; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .3); transition: transform .6s var(--sf-ease); }
.sf-project:hover :is(.sf-thumb img, .sf-screen) { transform: scale(1.04) rotate(-.6deg); }
.sf-screen { position: relative; overflow: hidden; background: var(--g); }
.sf-screen::before { content: ''; position: absolute; left: 9%; top: 14%; width: 46%; height: 11%; border-radius: 6px; background: rgba(255, 255, 255, .9); }
.sf-screen::after { content: ''; position: absolute; left: 9%; top: 32%; width: 34%; height: 5%; border-radius: 4px; background: rgba(255, 255, 255, .55); box-shadow: 0 14px 0 rgba(255, 255, 255, .4); }
.sf-screen > span { position: absolute; left: 9%; right: 9%; bottom: 10%; height: 34%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sf-screen > span::before, .sf-screen > span::after, .sf-screen > span i { content: ''; border-radius: 8px; background: rgba(255, 255, 255, .28); }
.sf-screen em { position: absolute; right: 9%; top: 13%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.sf-project-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 8px 6px; }
.sf-project-meta h3 { margin: 0; font-size: 1.12rem; }
.sf-project-meta h3 a { color: inherit; text-decoration: none; }
.sf-project-meta p { margin: 0; color: var(--wp--preset--color--muted); font-size: 14px; }
.sf-round { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--wp--preset--color--base); box-shadow: var(--sf-raised-sm); color: var(--wp--preset--color--contrast); font-size: 18px; transition: box-shadow .25s, color .25s, transform .25s; }
.sf-round:hover { color: var(--wp--preset--color--accent); transform: translateY(-2px); }
.sf-round:active { box-shadow: var(--sf-inset-sm); transform: none; }
.sf-empty { padding: 2rem; border-radius: var(--sf-radius); box-shadow: var(--sf-inset-sm); text-align: center; color: var(--wp--preset--color--muted); }

/* ---------- Estimator ---------- */
.sf-estimator { display: grid; grid-template-columns: 1.35fr 1fr; padding: 14px; border-radius: 34px; background: var(--wp--preset--color--base); box-shadow: var(--sf-raised); }
.sf-est-controls { padding: 34px 36px; }
.sf-estimator fieldset { margin: 0 0 32px; padding: 0; border: 0; }
.sf-estimator fieldset:last-child { margin-bottom: 0; }
.sf-estimator legend { display: flex; justify-content: space-between; width: 100%; margin-bottom: 14px; font-weight: 700; }
.sf-pages-out { color: var(--wp--preset--color--accent); }
.sf-seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sf-seg label, .sf-switch { position: relative; cursor: pointer; }
.sf-seg input, .sf-switch input { position: absolute; opacity: 0; }
.sf-seg label > span { display: flex; flex-direction: column; height: 100%; padding: 16px 18px; border-radius: 18px; box-shadow: var(--sf-raised-sm); font-weight: 600; line-height: 1.35; transition: box-shadow .25s, color .25s; }
.sf-seg small, .sf-switch small { color: var(--wp--preset--color--muted); font-size: 13px; font-weight: 500; }
.sf-seg input:checked + span { box-shadow: var(--sf-inset-sm); color: var(--wp--preset--color--accent); }
.sf-seg input:focus-visible + span, .sf-switch input:focus-visible + .sf-track { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }
.sf-estimator input[type=range] { width: 100%; height: 14px; margin: 10px 0; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--accent) 45%, var(--wp--preset--color--base)) var(--p, 25%), var(--wp--preset--color--base) var(--p, 25%)); box-shadow: var(--sf-inset-sm); cursor: pointer; -webkit-appearance: none; appearance: none; }
.sf-estimator input[type=range]::-webkit-slider-thumb { width: 32px; height: 32px; border-radius: 50%; background: var(--wp--preset--gradient--button); box-shadow: 4px 4px 10px var(--wp--preset--color--shade), -4px -4px 10px var(--wp--preset--color--highlight); -webkit-appearance: none; }
.sf-estimator input[type=range]::-moz-range-thumb { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--wp--preset--gradient--button); box-shadow: 4px 4px 10px var(--wp--preset--color--shade), -4px -4px 10px var(--wp--preset--color--highlight); }
.sf-range-scale { display: flex; justify-content: space-between; color: var(--wp--preset--color--muted); font-size: 13px; }
.sf-switches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
.sf-switch { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.sf-switch small { display: block; }
.sf-track { position: relative; flex: none; width: 56px; height: 30px; border-radius: 999px; box-shadow: var(--sf-inset-sm); transition: background-color .3s; }
.sf-track::after { content: ''; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--wp--preset--color--base); box-shadow: 2px 2px 5px var(--wp--preset--color--shade), -2px -2px 5px var(--wp--preset--color--highlight); transition: transform .3s cubic-bezier(.3, 1.5, .6, 1), background-color .3s; }
.sf-switch input:checked + .sf-track { background: color-mix(in srgb, var(--wp--preset--color--accent) 22%, var(--wp--preset--color--base)); }
.sf-switch input:checked + .sf-track::after { transform: translateX(26px); background: var(--wp--preset--color--accent); }
.sf-est-result { display: flex; flex-direction: column; justify-content: center; padding: 40px 34px; border-radius: 26px; box-shadow: var(--sf-inset); text-align: center; }
.sf-est-label { color: var(--wp--preset--color--muted); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.sf-total { display: block; margin: 10px 0 6px; font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 800; line-height: 1.1; letter-spacing: -.045em; }
.sf-bump { animation: sf-bump .35s ease; }
@keyframes sf-bump { 40% { transform: scale(1.06); } }
.sf-est-note { color: var(--wp--preset--color--muted); font-size: 13px; }
.sf-est-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; margin: 30px 0; }
.sf-est-meta div { padding: 16px; border-radius: 18px; box-shadow: var(--sf-raised-sm); }
.sf-est-meta b { display: block; font-size: 1.2rem; }
.sf-est-meta span { color: var(--wp--preset--color--muted); font-size: 13px; }
@media (max-width: 1000px) { .sf-estimator { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
	.sf-est-controls { padding: 24px 12px; }
	.sf-seg, .sf-switches { grid-template-columns: 1fr; }
	.sf-est-result { padding: 30px 18px; }
}

/* ---------- Contact form ---------- */
.sf-contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sf-field { display: grid; gap: 8px; margin: 0; }
.sf-field label { padding-left: 6px; font-size: 14px; font-weight: 600; }
.sf-full, .sf-contact-form > button, .sf-form-status, .sf-success { grid-column: 1 / -1; }
.sf-contact-form textarea { min-height: 140px; resize: vertical; }
.sf-contact-form select { -webkit-appearance: none; appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a93a3' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; }
.sf-contact-form > button { padding-block: 18px; }
.sf-form-status { margin: 0; color: #d93a5b; font-weight: 600; }
.sf-form-status:empty { display: none; }
.sf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sf-success { padding: 40px 20px; text-align: center; animation: sf-pop .5s ease both; }
.sf-success-icon { display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto 22px; border-radius: 50%; box-shadow: var(--sf-inset-sm); color: #22c55e; font-size: 34px; }
.sf-success h3 { margin: 0 0 8px; font-size: 1.6rem; }
.sf-success p { margin: 0; color: var(--wp--preset--color--muted); }
@media (max-width: 640px) { .sf-contact-form { grid-template-columns: 1fr; } }

/* ---------- Posts ---------- */
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; box-shadow: var(--sf-raised-sm); color: var(--wp--preset--color--contrast); text-decoration: none; }
.wp-block-query-pagination .page-numbers.current { box-shadow: var(--sf-inset-sm); color: var(--wp--preset--color--accent); }
.wp-block-post-title a { text-decoration: none; }
.wp-block-comment-template { padding: 0; list-style: none; }
.wp-block-comment-template li { margin-bottom: 1.25rem; padding: 1.25rem 1.5rem; border-radius: 20px; box-shadow: var(--sf-raised-sm); }

/* ---------- Scroll reveal (only when JS adds .sf-js) ---------- */
.sf-js .sf-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s var(--sf-ease), box-shadow .35s; }
.sf-js .sf-reveal.sf-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.sf-js .sf-reveal { opacity: 1; transform: none; }
}

/* Footer bar is a pill on wide screens. */
@media (min-width: 900px) { .wp-site-blocks > footer .is-style-neo-inset { border-radius: 999px; } }

/* ---------- Customizer-driven sections, header and footer ---------- */
.wp-element-button.sf-btn-neo { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); box-shadow: var(--sf-raised-sm); }
.wp-element-button.sf-btn-neo:hover { color: var(--wp--preset--color--accent); }
.wp-element-button.sf-btn-neo:active { box-shadow: var(--sf-inset-sm); }

.sf-section { padding: var(--wp--preset--spacing--80) var(--wp--style--root--padding-right, 24px) var(--wp--preset--spacing--80) var(--wp--style--root--padding-left, 24px); }
.sf-section :where(p, h1, h2, h3, blockquote, figure, ul) { margin: 0; }
.sf-section-hero { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--60); }
.sf-section-clients { padding-top: var(--wp--preset--spacing--30); padding-bottom: var(--wp--preset--spacing--30); }
.sf-section-stats { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--30); }
.sf-section-contact { padding-top: var(--wp--preset--spacing--40); }
.sf-wrap { max-width: var(--wp--style--global--wide-size, 1180px); margin-inline: auto; }
.sf-head { display: grid; gap: 18px; max-width: 640px; margin: 0 auto var(--wp--preset--spacing--60) !important; text-align: center; }
.sf-head p.is-style-eyebrow { margin-inline: auto; }
.sf-head h2, .sf-contact-info h2 { font-size: var(--wp--preset--font-size--x-large); }
.sf-lead { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--large); }
.sf-muted { color: var(--wp--preset--color--muted); }
.sf-grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fill, minmax(max(min(var(--sf-min, 17rem), 100%), calc((100% - (var(--sf-n, 3) - 1) * 30px) / var(--sf-n, 3))), 1fr)); }

.sf-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.sf-hero h1 { margin: 26px 0 22px; font-size: var(--wp--preset--font-size--xx-large); letter-spacing: -.04em; }
.sf-actions { display: flex; flex-wrap: wrap; gap: 18px; margin: var(--wp--preset--spacing--50) 0; }
.sf-proof { display: flex; align-items: center; gap: 16px; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.sf-avatars { display: flex; }
.sf-stars { color: #f5a524; letter-spacing: 2px; }
@media (max-width: 1000px) { .sf-hero { grid-template-columns: 1fr; } .sf-hero-media { max-width: 460px; width: 100%; margin-inline: auto; } }

.sf-kicker { margin-bottom: 24px !important; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.sf-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.sf-stat { text-align: center; }
.sf-stat h3 { font-size: var(--wp--preset--font-size--x-large); }
.sf-stat p { color: var(--wp--preset--color--muted); }
.sf-card { display: flex; flex-direction: column; gap: .75rem; }
.sf-card .sf-icon-tile { margin-bottom: .75rem; }
.sf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .5rem; }
.sf-step { display: grid; justify-items: center; gap: .5rem; text-align: center; }
.sf-step p.is-style-step { margin-bottom: .5rem; }
.sf-steps-free::before { display: none; }
.sf-meta { color: var(--wp--preset--color--accent); font-size: var(--wp--preset--font-size--small); font-weight: 700; }
.sf-quote { display: flex; flex-direction: column; gap: 1.25rem; }
.sf-quote blockquote p { font-size: var(--wp--preset--font-size--large); }
.sf-who { display: flex; align-items: center; gap: 14px; margin-top: auto !important; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.sf-who strong { color: var(--wp--preset--color--contrast); }
.sf-faq { display: grid; gap: 20px; max-width: 820px; margin-inline: auto; }
.sf-contact { display: grid; grid-template-columns: 42fr 58fr; gap: var(--wp--preset--spacing--60); align-items: center; padding: var(--wp--preset--spacing--60) !important; }
.sf-contact-info { display: grid; gap: 18px; }
.sf-contact-info p.is-style-eyebrow { margin: 0; }
.sf-info { display: grid; gap: 18px; margin-top: var(--wp--preset--spacing--30) !important; padding: 0; list-style: none; }
.sf-info li { display: flex; align-items: center; gap: 16px; font-size: var(--wp--preset--font-size--small); line-height: 1.45; }
.sf-info a { color: inherit; text-decoration: none; }
.sf-info small { color: var(--wp--preset--color--muted); font-size: inherit; }
@media (max-width: 1000px) { .sf-contact { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sf-contact { padding: 26px 16px !important; } }

.sf-site-header { padding-inline: var(--wp--style--root--padding-left, 24px) var(--wp--style--root--padding-right, 24px); }
.sf-header-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--wp--style--global--wide-size, 1180px); margin-inline: auto; padding: 10px 10px 10px 22px; border-radius: 999px; background: var(--wp--preset--color--base); box-shadow: var(--sf-raised); transition: background-color .4s, box-shadow .35s; }
.sf-brand-link { display: flex; align-items: center; gap: 12px; flex: none; color: var(--wp--preset--color--contrast); font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.sf-logo { width: auto; max-width: 160px; height: 38px; object-fit: contain; }
.sf-mark { width: 38px; height: 38px; border-radius: 50%; box-shadow: var(--sf-raised-sm); background: radial-gradient(circle at 42% 42%, var(--wp--preset--color--accent-2) 0, var(--wp--preset--color--accent) 7px, transparent 8.5px); }
.sf-menu { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sf-menu a { display: block; padding: 10px 16px; border-radius: 999px; color: var(--wp--preset--color--muted); font-size: 15px; font-weight: 500; text-decoration: none; transition: box-shadow .25s, color .25s; }
.sf-menu a:hover, .sf-menu .current-menu-item > a { color: var(--wp--preset--color--contrast); box-shadow: var(--sf-inset-sm); }
.sf-menu-toggle { display: none; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--wp--preset--color--base); box-shadow: var(--sf-raised-sm); color: var(--wp--preset--color--contrast); font-size: 22px; cursor: pointer; }
.sf-menu-toggle .sf-i-close, .sf-nav.is-open .sf-i-menu { display: none; }
.sf-nav.is-open .sf-i-close { display: block; }
.sf-header-actions { display: flex; align-items: center; gap: 12px; }
@media (max-width: 900px) {
	.sf-menu-toggle { display: grid; }
	.sf-nav { order: 3; }
	.sf-header-actions { margin-left: auto; }
	.sf-nav .sf-menu { position: absolute; top: calc(100% + 12px); left: 0; right: 0; display: none; flex-direction: column; padding: 14px; border-radius: var(--sf-radius); background: var(--wp--preset--color--base); box-shadow: var(--sf-raised); }
	.sf-nav.is-open .sf-menu { display: flex; }
	.sf-nav .sf-menu a { font-size: 1.1rem; }
}
@media (max-width: 600px) { .sf-header-bar { padding-left: 14px; } .sf-header-cta { display: none !important; } }

.sf-site-footer { padding: var(--wp--preset--spacing--40) var(--wp--style--root--padding-right, 24px) var(--wp--preset--spacing--60) var(--wp--style--root--padding-left, 24px); }
.sf-footer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; max-width: var(--wp--style--global--wide-size, 1180px); margin-inline: auto; padding: 18px 30px !important; }
.sf-footer-bar .sf-mark { width: 30px; height: 30px; }
.sf-copy { margin: 0; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
@media (min-width: 900px) { .sf-footer-bar { border-radius: 999px; } }
@media (max-width: 700px) { .sf-footer-bar { flex-direction: column; text-align: center; } .sf-footer-menu { justify-content: center; } }

/* Project pages: screenshots sit in a browser-style frame. */
.single-sf_project .wp-block-post-featured-image img { object-position: top center; }
.sf-live-link .wp-block-button__link::after { content: '\2197'; font-size: 1.1em; }
.single-sf_project .wp-block-image.is-style-neo-frame { max-width: 340px; margin-inline: auto; }
.single-sf_project .wp-block-list li + li { margin-top: .5rem; }
.wp-block-post-terms a { color: var(--wp--preset--color--accent); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }