:root {
	--spaciefy-black: #000000;
	--spaciefy-black-soft: #010101;
	--spaciefy-white: #ffffff;
	--spaciefy-yellow: #f9cf0e;
	--spaciefy-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--spaciefy-font-manrope: "Manrope", var(--spaciefy-font);
	--spaciefy-font-helvetica: "Helvetica Neue", Helvetica, var(--spaciefy-font);
	--spaciefy-container: 1766px;
	/*
	 * 96% above ~750px viewport (the original desktop gutter), switching to a
	 * fixed 15px gutter below it — the two expressions cross at 750px, so this
	 * one value covers what used to be a desktop rule plus a 767px override.
	 */
	--spaciefy-container-width: min(96%, 100% - 30px);
	--spaciefy-container-pad-x: 0px;
	--spaciefy-gutter: 0px;
	--spaciefy-artboard: 1920;
	--spaciefy-gradient-brand: linear-gradient(180deg, #ffffff 0%, #000000 100%);
	--spaciefy-gradient-watermark: linear-gradient(180deg, #ffffff 0%, #010101 100%);

	/*
	 * Header & hero typography.
	 *
	 * Sizes are fluid ramps rather than per-breakpoint overrides. Each ramp is
	 * a straight line fitted through the design's own authored values, so the
	 * clamp max is the untouched 1920px Figma figure and the desktop range
	 * renders within a few percent of what it always did. The clamp min is a
	 * readability floor — the old tier ladder scaled type proportionally to the
	 * viewport with no floor, which bottomed out below 10px on phones.
	 */
	--sp-font-nav: clamp(15px, calc(0.9971vw + 0.856px), 20px);
	--sp-font-nav-lh: 1.62;
	--sp-header-cta-size: clamp(14px, calc(0.9137vw + 2.456px), 20px);
	--sp-header-cta-lh: 1.14;
	--sp-header-cta-icon-size: calc(var(--sp-header-cta-size) * 1.55 + 2px);
	--sp-header-cta-icon-svg: calc(var(--sp-header-cta-size) * 0.65);
	--sp-header-cta-icon-radius: var(--sp-cta-icon-radius);
	--sp-header-cta-gap: calc(var(--sp-header-cta-size) * 0.7);
	--sp-header-mobile-actions-gap: calc(var(--sp-header-cta-size) * 0.5);
	--sp-header-mobile-nav-gap: calc(var(--sp-font-nav) * 0.6);
	--sp-header-mobile-cta-max: clamp(4.5rem, 24vw, 9rem);
	--sp-header-menu-toggle-size: var(--sp-header-cta-icon-size);
	/* Mobile "Menu" word — Figma 19px @402. */
	--sp-header-menu-label-size: clamp(17px, calc(1.0383vw + 14.826px), 23px);
	--sp-header-pad-top: clamp(16px, 2.0833vw, 40px);
	--sp-header-min-height: clamp(56px, 5vw, 96px);
	--sp-header-row-gap: 16px;
	--sp-header-nav-gap: 0;
	--sp-hero-heading-size: clamp(34px, calc(6.3412vw - 21.904px), 99.846px);
	--sp-hero-subtext-size: clamp(15px, calc(1.0675vw + 1.504px), 22px);
	--sp-hero-meta-font-size: clamp(13px, calc(0.6185vw + 5.667px), 17.543px);
	--sp-hero-service-font-size: clamp(14px, calc(0.7054vw + 6.456px), 20px);
	--sp-hero-service-lh: 1.62;
	--sp-hero-cta-font-size: clamp(15px, calc(0.916vw + 2.476px), 20.064px);
	--sp-hero-cta-pad-x: clamp(24px, calc(1.9648vw + 0.276px), 38px);
	--sp-hero-cta-pad-y: clamp(12px, calc(0.4167vw + 7px), 15px);

	--sp-font-body-sm: clamp(13px, calc(15 / var(--spaciefy-artboard) * 100vw), 15px);
	--sp-font-body-xs: clamp(12px, calc(14 / var(--spaciefy-artboard) * 100vw), 14px);
	--sp-font-logo: clamp(24px, calc(30 / var(--spaciefy-artboard) * 100vw), 30px);

	/* Logo image — Figma 147×38.59 */
	--sp-logo-width: clamp(100px, calc(4.1584vw + 67.159px), 147px);
	--sp-logo-height: calc(var(--sp-logo-width) * 42 / 160);

	/*
	 * WCAG 2.5.5 minimum target size. Compact inline controls keep their
	 * rendered size and gain an invisible ::after hit area sized to this
	 * value, so the touch target grows without moving anything on screen.
	 */
	--sp-tap-min: 44px;

	/* CTA icon. Size stays flat — the tap target is widened via a hit area in
	   the component CSS rather than by scaling the icon itself. */
	--sp-cta-icon-size: 31px;
	--sp-cta-icon-svg: 13px;
	--sp-cta-gap: clamp(8px, calc(0.714vw + 0.292px), 14px);

	/* Spacing */
	--sp-section-gap: clamp(12px, calc(1.6703vw - 0.069px), 32px);
	--sp-stack-gap-sm: clamp(12px, calc(18 / var(--spaciefy-artboard) * 100vw), 18px);
	--sp-stack-gap-md: clamp(14px, calc(22 / var(--spaciefy-artboard) * 100vw), 22px);

	/* Footer — 1920px baseline */
	--sp-footer-nav-size: clamp(14px, calc(1.1875vw - 2.8px), 20px);
	--sp-footer-nav-lh: 1.62;
	--sp-footer-nav-gap: 3px;
	--sp-footer-copyright-size: clamp(12px, calc(1.125vw - 3.6px), 18px);
	--sp-footer-cta-size: clamp(14px, calc(1.1042vw - 1.2px), 20px);
	--sp-footer-cta-lh: 1.14;
	--sp-footer-email-size: clamp(14px, calc(1.1667vw - 2.9px), 19.5px);
	--sp-footer-email-tracking: 0.892px;
	--sp-footer-social-size: clamp(13px, calc(1.1875vw - 2.8px), 20px);
	--sp-footer-social-lh: 1.62;
	--sp-footer-legal-size: clamp(12px, calc(1.0625vw - 4.4px), 16px);
	--sp-footer-contact-gap-md: 22px;
	--sp-footer-contact-gap-sm: 18px;
	--sp-footer-watermark-width: 1746.656px;
	--sp-footer-watermark-height: 465px;
	--sp-footer-watermark-scale: 1;
	--sp-footer-watermark-ratio: 1746.656 / 465;
	--sp-footer-main-gap: 75px;
	--sp-footer-bottom-space: 80px;
	--sp-footer-watermark-offset: 0;
	--sp-footer-artboard-height: 729px;
	--sp-footer-pad-top: clamp(28px, calc(3.6015vw - 0.149px), 69px);

	/* Hero — Figma 1920×960 artboard */
	--sp-hero-min-height: clamp(420px, calc(51.293vw - 24.83px), 960px);
	--sp-hero-pad-bottom: clamp(32px, calc(4.3103vw - 2.759px), 80px);
	--sp-hero-top-gap: clamp(48px, calc(7.3276vw - 13.69px), 127px);
	--sp-hero-heading-gap: clamp(14px, calc(2.0797vw - 2.931px), 37px);
	--sp-hero-heading-line-max: 100%;
	--sp-hero-subtext-max: min(840px, 100%);
	--sp-hero-subtext-cta-gap: clamp(14px, calc(1.8211vw - 2.966px), 32px);
	--sp-hero-cta-radius: 74px;
	--sp-cta-icon-radius: 8px;
	--sp-hero-cta-gap: 8px;
	--sp-hero-cta-icon-min: clamp(44px, calc(0.431vw + 39.724px), 48px);
	--sp-hero-cta-icon-svg: clamp(11px, calc(0.1616vw + 9.397px), 12.5px);
	--sp-hero-preview-width: clamp(150px, calc(20.3041vw - 0.839px), 389px);
	--sp-hero-showcase-gap: clamp(12px, calc(1.9397vw - 7.241px), 30px);
	--sp-hero-footer-top-gap: clamp(48px, calc(12.3922vw - 20.931px), 217px);
	--sp-hero-service-gap: clamp(8px, 0.521vw, 10px);

	/* Client logos marquee — 1920px baseline */
	--sp-client-logos-pad-top: clamp(12px, calc(62 / var(--spaciefy-artboard) * 100vw), 62px);
	--sp-client-logos-gap: clamp(25px, calc(100 / var(--spaciefy-artboard) * 100vw), 100px);
	--sp-client-logos-logo-max-width: calc((100vw - var(--sp-client-logos-gap) * 6) / 7);
	--sp-client-logos-duration: 40s;

	/* Manifesto — Figma 1661 artboard (node 1:2); 110px top gap from client logos @ 1920 */
	--sp-manifesto-container-max: 1735px;
	--sp-manifesto-pad-top: clamp(32px, 5.7292vw, 110px);
	--sp-manifesto-heading-bottom: clamp(48px, 16.6667vw, 320px);
	--sp-manifesto-intro-max: min(1186px, 100%);
	--sp-manifesto-intro-size: clamp(17px, calc(2.2143vw - 4.897px), 37.618px);
	--sp-manifesto-intro-lh: 1.43;
	--sp-manifesto-intro-label-gap: clamp(40px, 11.4583vw, 220px);
	--sp-manifesto-statement-left: clamp(0px, 15vw, 288px);
	--sp-manifesto-label-size: clamp(12px, calc(1.2054vw - 5.601px), 17.543px);
	--sp-manifesto-label-tracking: 5.964px;
	--sp-manifesto-heading-size: clamp(40px, calc(7.4318vw - 15.483px), 127.207px);
	--sp-manifesto-heading-lh: 1.43;
	--sp-manifesto-heading-tracking: -2.564px;
	--sp-manifesto-heading-color: #232325;

	/* Shared vertical section padding — expertise, selected work, testimonials, insights */
	--sp-section-pad-y: clamp(40px, calc(6.7332vw - 0.277px), 129px);

	/* Selected Work — Figma 1661 artboard */
	--sp-selected-work-pad-top: calc(var(--sp-section-pad-y) * 95 / 129);
	--sp-selected-work-pad-bottom: calc(var(--sp-section-pad-y) * 105 / 129);
	--sp-selected-work-header-gap: clamp(16px, calc(3.2099vw + 2.369px), 64px);
	--sp-selected-work-header-bottom: calc(var(--sp-section-pad-y) * 66 / 129);
	--sp-selected-work-heading-size: clamp(30px, calc(4.1848vw - 8.348px), 72px);
	--sp-selected-work-heading-lh: 0.98;
	--sp-selected-work-subtext-max: min(535px, 100%);
	--sp-selected-work-subtext-size: clamp(15px, calc(1.5994vw - 8.708px), 22px);
	--sp-selected-work-subtext-lh: 1.48562;
	--sp-selected-work-subtext-tracking: 0.66px;
	--sp-selected-work-list-top: calc(var(--sp-section-pad-y) * 52 / 129);
	--sp-selected-work-footer-top: clamp(24px, calc(3.0838vw + 0.792px), 60px);

	/* Expertise */
	--sp-expertise-pad-top: calc(var(--sp-section-pad-y) * 120 / 129);
	--sp-expertise-pad-bottom: calc(var(--sp-section-pad-y) * 124 / 129);
	--sp-expertise-heading-size: var(--sp-selected-work-heading-size);
	--sp-expertise-heading-lh: var(--sp-selected-work-heading-lh, 0.98);
	--sp-expertise-heading-bottom: clamp(28px, calc(4.3321vw - 9.177px), 74px);
	--sp-expertise-title-size: clamp(20px, calc(3.4229vw - 21.72px), 44px);
	--sp-expertise-title-lh: 0.96;
	--sp-expertise-tags-size: clamp(13px, calc(1.7521vw - 7.64px), 26px);
	--sp-expertise-tags-lh: 1.43;
	--sp-expertise-desc-size: clamp(15px, calc(1.125vw + 2.4px), 24px);
	--sp-expertise-desc-lh: 1.43;
	--sp-expertise-desc-max: 100%;
	--sp-expertise-content-pad-right: clamp(24px, calc(160 / var(--spaciefy-artboard) * 100vw), 160px);
	--sp-expertise-number-size: clamp(13px, calc(1.125vw + 4.4px), 26px);
	--sp-expertise-number-lh: 1.43;
	--sp-expertise-accent-width: clamp(24px, 4.234vw, 42px);
	--sp-expertise-accent-height: 3px;
	--sp-expertise-accent-gap: clamp(5px, calc(1.25vw - 9px), 15px);
	--sp-expertise-index-width: auto;
	--sp-expertise-toggle-gap: clamp(16px, calc(493 / var(--spaciefy-artboard) * 100vw), 493px);
	--sp-expertise-summary-gap: clamp(6px, calc(0.3348vw + 4.57px), 11px);
	--sp-expertise-tags-desc-gap: clamp(10px, calc(2.5vw - 20px), 28px);
	--sp-expertise-desc-gap: clamp(14px, calc(3.3333vw - 24px), 40px);
	--sp-expertise-item-pad-top: clamp(20px, calc(5.4167vw - 40px), 64px);
	--sp-expertise-item-pad-bottom: clamp(20px, calc(5.4167vw - 40px), 64px);
	--sp-expertise-cta-size: clamp(14px, calc(0.625vw + 6px), 18px);
	--sp-expertise-cta-pad-y: clamp(10px, 1.411vw, 14px);
	--sp-expertise-cta-pad-x: clamp(18px, 3.226vw, 32px);
	--sp-expertise-fade-height: clamp(56px, 9.387vw, 120px);
	--sp-expertise-scroll-more-top: clamp(10px, calc(2.5vw - 20px), 28px);
	--sp-expertise-scroll-more-size: clamp(14px, calc(1.125vw + 4.4px), 26px);

	/* Testimonials */
	--sp-testimonials-pad-top: clamp(48px, calc(102 / var(--spaciefy-artboard) * 100vw), 102px);
	--sp-testimonials-pad-bottom: clamp(56px, calc(119 / var(--spaciefy-artboard) * 100vw), 119px);
	--sp-testimonials-heading-size: clamp(22px, calc(35.618 / var(--spaciefy-artboard) * 100vw), 35.618px);
	--sp-testimonials-heading-bottom: clamp(24px, calc(48 / var(--spaciefy-artboard) * 100vw), 48px);
	--sp-testimonials-grid-columns: 3;
	--sp-testimonials-card-gap: clamp(16px, calc(34 / var(--spaciefy-artboard) * 100vw), 34px);
	--sp-testimonials-card-pad: clamp(20px, calc(36 / var(--spaciefy-artboard) * 100vw), 36px);
	--sp-testimonials-card-min-height: clamp(360px, calc(580 / var(--spaciefy-artboard) * 100vw), 580px);
	--sp-testimonials-quote-size: clamp(14px, calc(24 / var(--spaciefy-artboard) * 100vw), 24px);
	--sp-testimonials-quote-bottom: clamp(20px, calc(34 / var(--spaciefy-artboard) * 100vw), 34px);
	--sp-testimonials-footer-gap: clamp(12px, calc(16 / var(--spaciefy-artboard) * 100vw), 16px);
	--sp-testimonials-meta-gap: clamp(8px, calc(10 / var(--spaciefy-artboard) * 100vw), 10px);
	--sp-testimonials-name-size: clamp(16px, calc(28.618 / var(--spaciefy-artboard) * 100vw), 28.618px);
	--sp-testimonials-company-size: clamp(12px, calc(13.618 / var(--spaciefy-artboard) * 100vw), 13.618px);
	--sp-testimonials-company-tracking: clamp(1px, calc(1.77 / var(--spaciefy-artboard) * 100vw), 1.77px);
	--sp-testimonials-logo-max-width: clamp(64px, calc(120 / var(--spaciefy-artboard) * 100vw), 120px);
	--sp-testimonials-logo-max-height: clamp(28px, calc(48 / var(--spaciefy-artboard) * 100vw), 48px);
	--sp-testimonials-audio-inset: clamp(8px, calc(12 / var(--spaciefy-artboard) * 100vw), 12px);
	--sp-testimonials-audio-size: clamp(16px, calc(20 / var(--spaciefy-artboard) * 100vw), 20px);

	/* Insights — Figma 1920 artboard */
	--sp-insights-pad-top: clamp(48px, calc(127 / var(--spaciefy-artboard) * 100vw), 127px);
	--sp-insights-pad-bottom: clamp(40px, calc(92 / var(--spaciefy-artboard) * 100vw), 92px);
	--sp-insights-header-gap: clamp(16px, calc(32 / var(--spaciefy-artboard) * 100vw), 32px);
	--sp-insights-header-bottom: clamp(28px, calc(56 / var(--spaciefy-artboard) * 100vw), 56px);
	--sp-insights-header-stack-gap: clamp(12px, calc(24 / var(--spaciefy-artboard) * 100vw), 24px);
	/* Shares the Selected Work heading ramp — both are the 72px section title. */
	--sp-insights-heading-size: var(--sp-selected-work-heading-size);
	--sp-insights-heading-lh: 0.98;
	--sp-insights-grid-columns: 3;
	--sp-insights-grid-gap: clamp(16px, calc(26 / var(--spaciefy-artboard) * 100vw), 26px);
	--sp-insights-grid-row-gap: var(--sp-insights-grid-gap);
	--sp-insights-meta-top: clamp(10px, calc(12 / var(--spaciefy-artboard) * 100vw), 12px);
	--sp-insights-meta-gap: clamp(12px, calc(16 / var(--spaciefy-artboard) * 100vw), 16px);
	--sp-insights-meta-size: clamp(12px, calc(18 / var(--spaciefy-artboard) * 100vw), 18px);
	--sp-insights-meta-lh: 1.13;
	--sp-insights-title-top: clamp(14px, calc(22 / var(--spaciefy-artboard) * 100vw), 22px);
	--sp-insights-title-size: clamp(17px, calc(32 / var(--spaciefy-artboard) * 100vw), 32px);
	--sp-insights-title-lh: 1.23;
	--sp-insights-image-ratio: 571 / 380;
	/* View All CTA — compact variant of the project CTA pill */
	--sp-insights-cta-button-size: clamp(13px, calc(0.78vw + 1.2px), 16px);
	--sp-insights-cta-button-pad-y: clamp(8px, calc(0.38vw + 3.5px), 11px);
	--sp-insights-cta-button-pad-x: clamp(18px, calc(1.25vw + 8px), 34px);
	--sp-insights-cta-icon-size: clamp(34px, calc(1.05vw + 24px), 44px);
	--sp-insights-cta-icon-svg: clamp(10px, calc(0.28vw + 8px), 12px);

	/* Project CTA — Figma 1920 artboard (node 318:1152) */
	--sp-project-cta-pad-top: calc(var(--sp-section-pad-y) * 136 / 129);
	--sp-project-cta-pad-bottom: calc(var(--sp-section-pad-y) * 154 / 129);
	--sp-project-cta-yellow-width: 34.27%;
	--sp-project-cta-yellow-bg: #f9cf0e;
	--sp-project-cta-line-inset-left: clamp(20px, calc(75 / var(--spaciefy-artboard) * 100vw), 75px);
	--sp-project-cta-line-inset-right: clamp(20px, calc(76 / var(--spaciefy-artboard) * 100vw), 76px);
	--sp-project-cta-container-width: calc(100% - clamp(24px, 7.8125vw, 150px));
	--sp-project-cta-container-max: 1770px;
	--sp-project-cta-inner-gap: clamp(32px, calc(197 / 1920 * 100vw), 197px);
	--sp-project-cta-heading-size: clamp(26px, calc(3.2456vw - 3.469px), 58.846px);
	--sp-project-cta-heading-color: #0e0e0e;
	--sp-project-cta-heading-lh: 1.11;
	--sp-project-cta-heading-max: min(1040px, 100%);
	--sp-project-cta-button-size: clamp(15px, calc(0.9546vw + 1.736px), 20.064px);
	--sp-project-cta-button-pad-y: clamp(12px, calc(0.5225vw + 3.968px), 14px);
	--sp-project-cta-button-pad-x: clamp(24px, calc(1.8178vw + 11.099px), 46px);
	--sp-project-cta-icon-size: clamp(44px, calc(1.4009vw + 30.1px), 57px);

	/* Contact page — Figma 1920 artboard (node 294:2) */
	--sp-contact-min-height: 960px;
	--sp-contact-pad-top: clamp(48px, calc(109 / var(--spaciefy-artboard) * 100vw), 109px);
	--sp-contact-pad-bottom: clamp(48px, calc(92 / var(--spaciefy-artboard) * 100vw), 92px);
	--sp-contact-inner-max: clamp(600px, calc(1710 / var(--spaciefy-artboard) * 100vw), 1710px);
	--sp-contact-column-gap: clamp(32px, calc(299 / var(--spaciefy-artboard) * 100vw), 299px);
	--sp-contact-stack-gap: clamp(32px, 5vw, 48px);
	--sp-contact-content-max: clamp(280px, calc(625 / var(--spaciefy-artboard) * 100vw), 625px);
	--sp-contact-form-max: clamp(300px, calc(786 / var(--spaciefy-artboard) * 100vw), 786px);
	--sp-contact-form-pad: clamp(28px, calc(43.667 / var(--spaciefy-artboard) * 100vw), 43.667px);
	--sp-contact-form-inner-max: clamp(560px, calc(698.667 / var(--spaciefy-artboard) * 100vw), 698.667px);
	--sp-contact-label-size: clamp(12px, calc(17.543 / var(--spaciefy-artboard) * 100vw), 17.543px);
	--sp-contact-label-tracking: 5.964px;
	--sp-contact-label-gap: clamp(10px, calc(14 / var(--spaciefy-artboard) * 100vw), 14px);
	--sp-contact-heading-size: clamp(40px, calc(71.846 / var(--spaciefy-artboard) * 100vw), 71.846px);
	--sp-contact-heading-lh: 1.11;
	--sp-contact-heading-max: var(--sp-contact-content-max);
	--sp-contact-heading-gap: clamp(32px, calc(68 / var(--spaciefy-artboard) * 100vw), 68px);
	--sp-contact-details-col-max: 198px;
	--sp-contact-details-gap-x: clamp(32px, calc(155 / var(--spaciefy-artboard) * 100vw), 155px);
	--sp-contact-details-gap-y: clamp(24px, calc(68 / var(--spaciefy-artboard) * 100vw), 68px);
	--sp-contact-enquiries-offset: clamp(24px, calc(48 / var(--spaciefy-artboard) * 100vw), 48px);
	--sp-contact-phone-offset: clamp(24px, calc(60 / var(--spaciefy-artboard) * 100vw), 60px);
	--sp-contact-detail-label-size: clamp(12px, calc(11 / var(--spaciefy-artboard) * 100vw), 12px);
	--sp-contact-detail-label-tracking: 3.96px;
	--sp-contact-detail-label-gap: clamp(8px, calc(11 / var(--spaciefy-artboard) * 100vw), 11px);
	--sp-contact-detail-value-size: clamp(16px, calc(20 / var(--spaciefy-artboard) * 100vw), 20px);
	--sp-contact-detail-value-lh: 1.22955;
	--sp-contact-detail-value-tracking: 1px;
	--sp-contact-form-row-gap: clamp(24px, calc(34 / var(--spaciefy-artboard) * 100vw), 34px);
	--sp-contact-form-column-gap: clamp(16px, calc(24 / var(--spaciefy-artboard) * 100vw), 24px);
	--sp-contact-field-label-size: clamp(14px, calc(17.467 / var(--spaciefy-artboard) * 100vw), 17.467px);
	--sp-contact-field-label-gap: 8px;
	--sp-contact-message-label-gap: clamp(24px, calc(34 / var(--spaciefy-artboard) * 100vw), 34px);
	--sp-contact-input-height: clamp(48px, calc(56 / var(--spaciefy-artboard) * 100vw), 56px);
	--sp-contact-phone-prefix-width: 72px;
	--sp-contact-phone-dropdown-gap: 4px;
	--sp-contact-phone-dropdown-max-height: 220px;
	--sp-contact-phone-dropdown-pad-y: 10px;
	--sp-contact-phone-dropdown-pad-x: 15px;
	--sp-contact-phone-dropdown-size: clamp(13px, calc(14.5 / var(--spaciefy-artboard) * 100vw), 14.5px);
	--sp-contact-input-pad-x: 15px;
	--sp-contact-field-border: 0.546px solid #999999;
	--sp-contact-textarea-pad: 15px;
	--sp-contact-input-size: clamp(14px, calc(16.375 / var(--spaciefy-artboard) * 100vw), 16.375px);
	--sp-contact-textarea-height: clamp(120px, calc(174.667 / var(--spaciefy-artboard) * 100vw), 174.667px);
	--sp-contact-submit-min-width: 151px;
	--sp-contact-submit-pad-x: 34px;
	--sp-contact-submit-pad-y: 15px;
	--sp-contact-submit-size: 16px;
	--sp-contact-char-count-size: clamp(13px, calc(15.283 / var(--spaciefy-artboard) * 100vw), 15.283px);
}

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

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

body {
	margin: 0;
	overflow-x: clip;
	font-family: var(--spaciefy-font);
	font-size: 16px;
	line-height: 1.5;
	color: var(--spaciefy-white);
	background-color: var(--spaciefy-black);
}

.sp-skip-link {
	position: absolute;
	top: -100%;
	left: 16px;
	z-index: 100000;
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--spaciefy-black);
	background: var(--spaciefy-yellow);
	border-radius: 4px;
	text-decoration: none;
}

.sp-skip-link:focus {
	top: 16px;
	outline: 2px solid var(--spaciefy-white);
	outline-offset: 2px;
}

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

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

button {
	font: inherit;
}

/* Shared main container — 96% width, max 1766px (Figma 1920 artboard) */
.sp-header__inner,
.sp-hero__inner,
.sp-selected-work__inner,
.sp-expertise__inner,
.sp-testimonials__inner,
.sp-insights__inner,
.sp-footer__inner,
.sp-manifesto__inner,
.sp-project-cta__inner,
.sp-contact__container,
.sp-svc-hero__container,
.sp-about-hero__container,
.sp-about-images__container,
.sp-blog-detail__container,
.sp-page__inner,
.sp-about-manifesto__intro-wrap,
.sp-about-manifesto__inner,
.sp-about-manifesto__heading-wrap,
.sp-about-team__inner,
.sp-about-team__photo-wrap,
.sp-svc-marquee__inner,
.sp-svc-tech__inner,
.sp-svc-detail__inner,
.sp-svc-process__inner {
	padding-left: var(--spaciefy-container-pad-x);
	padding-right: var(--spaciefy-container-pad-x);
}

.sp-header__inner,
.sp-hero__inner,
.sp-selected-work__inner,
.sp-expertise__inner,
.sp-testimonials__inner,
.sp-insights__inner,
.sp-footer__inner,
.sp-blog-detail__container,
.sp-page__inner {
	width: var(--spaciefy-container-width);
	max-width: var(--spaciefy-container);
	margin-left: auto;
	margin-right: auto;
}

.sp-contact__container {
	position: relative;
	z-index: 1;
	width: var(--spaciefy-container-width);
	max-width: var(--spaciefy-container);
	margin-left: auto;
	margin-right: auto;
}