/* =============================================
SYNERGY POWER — Design System
============================================= */
:root {
--sp-dark: #0b1110;
--sp-dark-soft: #111a18;
--sp-dark-2: #0e1614;
--sp-cream: #fafaf6;
--sp-light: #f4f5f0;
--sp-light-2: #ebede5;
--sp-white: #ffffff;
--sp-green: #6ab544;
--sp-green-text: #6ab544; /* brand green for text (client request, Oct 2026) */
--sp-green-light: #7bcb55;
--sp-green-dark: #3e7a24;
--sp-green-soft: #e9f5df;
--sp-green-glow: rgba(107, 181, 68, 0.3);
--sp-text: #12181a;
--sp-text-2: #2e3733;
--sp-muted: #5f6863;
--sp-muted-2: #8a928d;
--sp-muted-dark: rgba(255, 255, 255, 0.55);
--sp-border: rgba(11, 17, 16, 0.08);
--sp-border-2: rgba(11, 17, 16, 0.12);
--sp-border-dark: rgba(255, 255, 255, 0.09);
--sp-radius: 18px;
--sp-radius-lg: 28px;
--sp-radius-sm: 12px;
--sp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--sp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--sp-container: 1360px;
--sp-font: "Switzer", "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
sans-serif;
/* No secondary display face — accents rely on weight, italic and colour
within the same family for a more institutional, single-voice feel. */
--sp-serif: "Switzer", "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
sans-serif;
--sp-header-h: 92px;
--sp-topbar-h: 0px;
--sp-utility-h: 0px;
}
/* ---------- BASE ---------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--sp-font);
font-weight: 400;
font-size: 17px;
line-height: 1.6;
color: var(--sp-text);
background: var(--sp-cream);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-synthesis: none;
-webkit-tap-highlight-color: transparent;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
overflow-x: hidden;
}
img,
svg {
max-width: 100%;
display: block;
image-rendering: -webkit-optimize-contrast;
}
/* Crisper heading tracking + hinting */
h1, h2, h3, h4, h5, h6,
.sp-h1, .sp-h2, .sp-h3 {
text-rendering: geometricPrecision;
-webkit-font-smoothing: subpixel-antialiased;
}
h1, .sp-h1 { letter-spacing: -0.025em; }
h2, .sp-h2 { letter-spacing: -0.02em; }
h3, .sp-h3 { letter-spacing: -0.015em; }
a {
color: inherit;
text-decoration: none;
}
button {
font-family: inherit;
}
::selection {
background: var(--sp-green);
color: var(--sp-dark);
}
.container-xxl {
max-width: var(--sp-container);
padding-left: 24px;
padding-right: 24px;
}
/* ---------- LABELS ---------- */
.sp-label {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
color: var(--sp-muted);
}
.sp-label--dark {
color: var(--sp-muted-dark);
}
.sp-label--dark strong {
color: #ffffff;
}
.sp-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--sp-green);
box-shadow: 0 0 0 4px rgba(123, 203, 85, 0.18);
display: inline-block;
animation: sp-pulse 2.4s infinite;
}
.sp-dot--dark {
background: var(--sp-green);
}
@keyframes sp-pulse {
0%,
100% {
box-shadow: 0 0 0 4px rgba(123, 203, 85, 0.15);
}
50% {
box-shadow: 0 0 0 8px rgba(123, 203, 85, 0.05);
}
}
/* ---------- ARROW LINK ---------- */
.sp-arrow-link {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 600;
color: var(--sp-dark);
border-bottom: 1px solid rgba(11, 17, 16, 0.2);
padding-bottom: 4px;
transition:
gap 0.3s var(--sp-ease),
color 0.3s var(--sp-ease),
border-color 0.3s var(--sp-ease);
}
.sp-arrow-link i {
transition: transform 0.3s var(--sp-ease);
}
.sp-arrow-link:hover {
gap: 16px;
border-color: var(--sp-green);
color: var(--sp-green-text);
}
.sp-arrow-link:hover i {
transform: translateX(4px);
}
.sp-arrow-link--light {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.3);
}
.sp-arrow-link--light:hover {
color: var(--sp-green);
border-color: var(--sp-green);
}
/* ---------- BUTTONS ---------- */
.sp-btn {
--btn-bg: transparent;
--btn-color: var(--sp-dark);
--btn-border: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 52px;
padding: 0 26px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
background: var(--btn-bg);
color: var(--btn-color);
border: 1.5px solid var(--btn-border);
border-radius: 999px;
cursor: pointer;
transition: all 0.3s var(--sp-ease);
position: relative;
overflow: hidden;
white-space: nowrap;
text-decoration: none;
}
.sp-btn i {
font-size: 16px;
transition: transform 0.3s var(--sp-ease);
}
.sp-btn:hover i {
transform: translateX(3px);
}
.sp-btn--sm {
height: 44px;
padding: 0 20px;
font-size: 14px;
}
.sp-btn--lg {
height: 60px;
padding: 0 32px;
font-size: 16px;
}
.sp-btn--primary {
--btn-bg: var(--sp-dark);
--btn-color: #ffffff;
--btn-border: var(--sp-dark);
isolation: isolate;
}
.sp-btn--primary::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
120deg,
var(--sp-green) 0%,
var(--sp-green-dark) 100%
);
transform: translateY(100%);
transition: transform 0.5s var(--sp-ease-out);
z-index: -1;
}
.sp-btn--primary > * {
position: relative;
z-index: 1;
}
.sp-btn--primary:hover {
color: var(--sp-dark);
border-color: var(--sp-green);
}
.sp-btn--primary:hover::before {
transform: translateY(0);
}
.sp-btn--ghost {
--btn-bg: rgba(255, 255, 255, 0.1);
--btn-color: #ffffff;
--btn-border: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.sp-btn--ghost:hover {
--btn-bg: #ffffff;
--btn-color: var(--sp-dark);
--btn-border: #ffffff;
}
.sp-btn--dark {
--btn-bg: var(--sp-dark);
--btn-color: #ffffff;
--btn-border: var(--sp-dark);
box-shadow: 0 8px 24px -8px rgba(11, 17, 16, 0.35);
}
.sp-btn--dark::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
120deg,
var(--sp-green) 0%,
var(--sp-green-dark) 100%
);
transform: translateY(100%);
transition: transform 0.5s var(--sp-ease-out);
z-index: 0;
}
.sp-btn--dark > * {
position: relative;
z-index: 1;
}
.sp-btn--dark:hover {
color: var(--sp-dark);
border-color: var(--sp-green);
box-shadow: 0 12px 32px -8px rgba(107, 181, 68, 0.4);
transform: translateY(-1px);
}
.sp-btn--dark:hover::before {
transform: translateY(0);
}
.sp-btn--outline {
--btn-bg: #ffffff;
--btn-color: var(--sp-dark);
--btn-border: var(--sp-border-2);
box-shadow: 0 2px 8px -2px rgba(11, 17, 16, 0.06);
}
.sp-btn--outline:hover {
--btn-bg: var(--sp-dark);
--btn-color: #ffffff;
--btn-border: var(--sp-dark);
transform: translateY(-1px);
}
.sp-btn--accent {
--btn-bg: var(--sp-green);
--btn-color: #ffffff;
--btn-border: var(--sp-green);
box-shadow: 0 8px 20px -10px rgba(107, 181, 68, 0.5);
}
.sp-btn--accent:hover {
--btn-bg: var(--sp-green-dark);
--btn-border: var(--sp-green-dark);
color: #ffffff;
box-shadow: 0 12px 26px -12px rgba(62, 122, 36, 0.55);
transform: translateY(-1px);
}
.sp-btn--outline-light {
--btn-bg: transparent;
--btn-color: #ffffff;
--btn-border: rgba(255, 255, 255, 0.4);
}
.sp-btn--outline-light:hover {
--btn-bg: #ffffff;
--btn-color: var(--sp-dark);
--btn-border: #ffffff;
}
.sp-btn--text {
height: 44px;
padding: 0 10px;
background: none;
border: none;
color: var(--sp-muted);
}
.sp-btn--text:hover {
color: var(--sp-dark);
}
.sp-btn--text:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* ---------- HEADER (transparent over hero, solidifies on scroll) ---------- */
/* ---------- TOP UTILITY BAR ---------- */
.sp-topbar {
display: none;
}
.sp-topbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--sp-topbar-h);
gap: 24px;
}
.sp-topbar__left,
.sp-topbar__right {
display: inline-flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.sp-topbar__link,
.sp-topbar__meta {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.78);
font-weight: 500;
letter-spacing: 0.01em;
transition: color 0.25s ease;
white-space: nowrap;
}
.sp-topbar__link:hover {
color: var(--sp-green-light);
}
.sp-topbar__link i,
.sp-topbar__meta i {
font-size: 13px;
color: var(--sp-green-light);
}
.sp-topbar__sep {
width: 1px;
height: 14px;
background: rgba(255, 255, 255, 0.14);
display: inline-block;
}
.sp-topbar__cta {
display: inline-flex;
align-items: center;
gap: 10px;
color: #ffffff;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.02em;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.04);
transition:
background 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease;
}
.sp-topbar__cta:hover {
background: var(--sp-green);
border-color: var(--sp-green);
transform: translateY(-1px);
}
.sp-topbar__cta strong {
color: #ffffff;
font-weight: 700;
letter-spacing: 0.03em;
}
.sp-topbar__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--sp-green-light);
box-shadow: 0 0 0 4px rgba(107, 181, 68, 0.28);
animation: sp-pulse 2.4s infinite;
flex-shrink: 0;
}
/* On light-glass sticky state, flip topbar to a soft light look for balance */
.sp-header.is-stuck:not(.is-dark) .sp-topbar {
background: rgba(11, 17, 16, 0.92);
}
.sp-header {
position: sticky;
top: 0;
z-index: 100;
background: transparent;
transition:
background 0.4s ease,
box-shadow 0.4s ease,
border-color 0.4s ease,
backdrop-filter 0.4s ease;
}
.sp-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--sp-header-h);
gap: 24px;
transition: height 0.3s ease;
}
/* Scrolled state — light glass over normal (light) sections */
.sp-header.is-stuck {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-bottom-color: var(--sp-border);
box-shadow: 0 10px 30px -20px rgba(11, 17, 16, 0.1);
}
.sp-header.is-stuck .sp-header__inner {
height: 76px;
}
/* Over dark sections at top — barely-there tint, no blur so the video
remains visible through the header. */
.sp-header.is-dark {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom-color: transparent;
box-shadow: none;
}
/* Over dark sections AND scrolled — solid glass dark */
.sp-header.is-dark.is-stuck {
background: rgba(11, 17, 16, 0.78);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-bottom-color: rgba(255, 255, 255, 0.06);
box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.5);
}
.sp-header.is-dark .sp-nav__link {
color: rgba(255, 255, 255, 0.85);
}
.sp-header.is-dark .sp-nav__link:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.06);
}
.sp-header.is-dark .sp-nav__list {
background: rgba(11, 17, 16, 0.28);
border-color: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.sp-header.is-dark .sp-logo__text {
color: #ffffff;
}
.sp-header.is-dark .sp-logo__text em {
color: rgba(255, 255, 255, 0.5);
}
.sp-header.is-dark .sp-logo__mark-wrap {
background: rgba(107, 181, 68, 0.15);
border-color: rgba(107, 181, 68, 0.3);
}
.sp-header.is-dark .sp-burger span {
background: #ffffff;
}
.sp-header.is-dark .sp-burger {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.sp-header.is-dark .sp-burger:hover {
background: rgba(255, 255, 255, 0.14);
}
.sp-header.is-dark .sp-header__mobilephone {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.sp-header.is-dark .sp-header__mobilephone:hover {
background: var(--sp-green);
border-color: var(--sp-green);
color: #ffffff;
}
.sp-header.is-dark .sp-header__phone-body em {
color: rgba(255, 255, 255, 0.55);
}
.sp-header.is-dark .sp-header__phone-body strong {
color: #ffffff;
}
/* Logo — image based */
.sp-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
transition: opacity 0.25s ease;
position: relative;
}
.sp-logo:hover {
opacity: 0.85;
}
.sp-logo__img {
display: block;
width: auto;
height: 73px;
max-width: 220px;
object-fit: contain;
}
@media (max-width: 991.98px) {
.sp-logo__img {
height: 44px;
}
}
@media (max-width: 575.98px) {
.sp-logo__img {
height: 40px;
max-width: 170px;
}
}
/* Offcanvas & footer: original logo on a soft white pill (uniform dark bg). */
.sp-logo--onDark .sp-logo__img {
background: #ffffff;
padding: 6px 14px;
border-radius: 12px;
box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.25);
}
/* Sticky header over dark sections: original logo on a frosted white pill —
keeps the client's green-on-white brand rather than a mono-white silhouette. */
.sp-header.is-stuck .sp-logo__img {
height: 73px;
}
/* Nav — inline flex so it never overlaps the phone card / CTA */
.sp-nav {
flex: 0 1 auto;
margin: 0 auto;
min-width: 0;
}
.sp-nav__list {
list-style: none;
display: flex;
align-items: center;
gap: 2px;
margin: 0;
padding: 6px;
background: rgba(11, 17, 16, 0.04);
border: 1px solid var(--sp-border);
border-radius: 999px;
}
.sp-nav__item {
position: relative;
}
.sp-nav__link {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: 0;
padding: 10px 18px;
font-size: 14px;
font-weight: 500;
color: var(--sp-text);
cursor: pointer;
transition: all 0.25s ease;
letter-spacing: 0.005em;
border-radius: 999px;
position: relative;
}
.sp-nav__link i {
font-size: 10px;
opacity: 0.5;
transition: transform 0.3s ease;
}
.sp-nav__link:hover {
color: var(--sp-dark);
background: #ffffff;
box-shadow: 0 2px 8px -2px rgba(11, 17, 16, 0.1);
}
.sp-nav__item:hover .sp-nav__link i {
transform: rotate(180deg);
}
/* Mega menu — viewport-centered, wide panel */
.sp-mega {
position: fixed;
top: calc(var(--sp-header-h) + var(--sp-topbar-h) + 8px);
left: 50%;
transform: translate(-50%, 10px);
width: min(1080px, 92vw);
background: #ffffff;
border-radius: var(--sp-radius-lg);
box-shadow:
0 32px 80px -24px rgba(11, 17, 16, 0.4),
0 12px 28px -12px rgba(11, 17, 16, 0.14);
padding: 32px;
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 32px;
opacity: 0;
visibility: hidden;
transition:
opacity 0.28s ease,
transform 0.32s var(--sp-ease-out),
visibility 0.28s;
z-index: 60;
border: 1px solid var(--sp-border);
}
.sp-mega--slim {
grid-template-columns: 1fr;
width: min(900px, 88vw);
}
.sp-nav__item:hover .sp-mega,
.sp-nav__item:focus-within .sp-mega {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
.sp-mega__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.sp-mega__grid--three {
grid-template-columns: 1fr 1fr 1fr;
}
.sp-mega__item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
border-radius: 14px;
border: 1px solid transparent;
transition:
background 0.25s var(--sp-ease),
border-color 0.25s var(--sp-ease),
transform 0.25s var(--sp-ease);
color: var(--sp-dark);
}
.sp-mega__item strong {
display: block;
font-weight: 700;
font-size: 15px;
letter-spacing: -0.005em;
}
.sp-mega__item em {
display: block;
font-style: normal;
font-size: 12.5px;
color: var(--sp-muted);
margin-top: 3px;
}
.sp-mega__item:hover {
background: var(--sp-cream);
border-color: rgba(107, 181, 68, 0.25);
transform: translateY(-1px);
}
.sp-mega__icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--sp-green-soft);
color: var(--sp-green-text);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
transition: background 0.25s var(--sp-ease), color 0.25s var(--sp-ease);
}
.sp-mega__item:hover .sp-mega__icon {
background: var(--sp-green);
color: #ffffff;
}
.sp-mega__aside {
background: var(--sp-dark);
color: #ffffff;
padding: 28px 26px;
border-radius: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
background-image: radial-gradient(
circle at 100% 0%,
rgba(123, 203, 85, 0.2),
transparent 60%
);
}
.sp-mega__aside h4 {
font-size: 20px;
margin: 8px 0 8px;
line-height: 1.2;
}
.sp-mega__aside p {
font-size: 13.5px;
color: rgba(255, 255, 255, 0.65);
margin: 0 0 16px;
}
.sp-mega__aside .sp-arrow-link {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.2);
}
.sp-mega__aside .sp-arrow-link:hover {
color: var(--sp-green);
border-color: var(--sp-green);
}
/* Header right */
.sp-header__right {
display: flex;
align-items: center;
gap: 14px;
}
.sp-header__phone {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--sp-dark);
padding: 4px;
transition: opacity 0.25s ease;
}
.sp-header__phone:hover {
opacity: 0.85;
}
.sp-header__phone-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--sp-green);
color: var(--sp-dark);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
position: relative;
}
.sp-header__phone-icon::before {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1.5px solid rgba(107, 181, 68, 0.45);
animation: sp-ring 2.4s infinite ease-out;
}
.sp-header__phone-body {
display: inline-flex;
flex-direction: column;
line-height: 1;
text-align: left;
}
.sp-header__phone-body em {
font-style: normal;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sp-muted);
margin-bottom: 5px;
font-weight: 500;
}
.sp-header__phone-body strong {
font-size: 15px;
font-weight: 700;
color: var(--sp-dark);
letter-spacing: -0.005em;
}
.sp-header__mobilephone {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--sp-border);
background: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--sp-dark);
transition: all 0.25s ease;
}
.sp-header__mobilephone:hover {
background: var(--sp-green);
color: var(--sp-dark);
border-color: var(--sp-green);
}
/* Burger */
.sp-burger {
width: 42px;
height: 42px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 12px;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
padding: 0;
cursor: pointer;
transition: background 0.25s ease;
}
.sp-burger:hover {
background: var(--sp-light);
}
.sp-burger span {
width: 18px;
height: 1.5px;
background: var(--sp-dark);
display: block;
transition:
transform 0.3s var(--sp-ease),
opacity 0.3s ease;
}
/* Offcanvas */
.sp-offcanvas {
background: var(--sp-dark) !important;
color: #ffffff;
width: 380px !important;
max-width: 92vw;
border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.sp-offcanvas .offcanvas-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding: 20px 28px;
}
.sp-offcanvas .offcanvas-body {
padding: 28px;
}
.sp-mobilenav__group {
margin-bottom: 28px;
}
.sp-mobilenav__group .sp-label {
display: block;
margin-bottom: 12px;
color: rgba(255, 255, 255, 0.4);
}
.sp-mobilenav__group a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
color: #ffffff;
font-size: 18px;
font-weight: 500;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition:
color 0.25s ease,
padding 0.25s ease;
}
.sp-mobilenav__group a i {
color: var(--sp-green);
opacity: 0.5;
font-size: 14px;
transition:
opacity 0.25s ease,
transform 0.3s var(--sp-ease);
}
.sp-mobilenav__group a:hover {
color: var(--sp-green);
padding-left: 6px;
}
.sp-mobilenav__group a:hover i {
opacity: 1;
transform: translateX(4px);
}
.sp-mobilenav__cta {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.sp-mobilenav__phone,
.sp-mobilenav__email {
display: flex;
align-items: center;
gap: 10px;
color: #ffffff;
padding: 14px 0;
font-size: 15px;
font-weight: 500;
}
.sp-mobilenav__phone i,
.sp-mobilenav__email i {
color: var(--sp-green);
}
.sp-mobilenav__email {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}
/* ============================================
TRUST PROOF BAND — stats + accreditations + quote
Sits directly under hero; carries the "trust earlier" brief.
============================================ */
.sp-trust {
position: relative;
z-index: 4;
background: var(--sp-cream);
padding: 72px 0 64px;
border-bottom: 1px solid var(--sp-border);
}
.sp-trust__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px 32px;
}
/* Matrix variant — 6 premium cards in one line */
.sp-trust__stats--matrix {
grid-template-columns: repeat(6, 1fr);
gap: 16px;
}
.sp-trust__stats--matrix .sp-trust__stat {
padding: 24px 22px 22px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 0;
overflow: hidden;
position: relative;
transition:
transform 0.35s var(--sp-ease-out),
border-color 0.3s ease,
box-shadow 0.35s ease;
}
.sp-trust__stats--matrix .sp-trust__stat::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--sp-green), var(--sp-green-dark));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s var(--sp-ease-out);
}
.sp-trust__stats--matrix .sp-trust__stat:hover {
transform: translateY(-3px);
border-color: rgba(107, 181, 68, 0.35);
box-shadow: 0 20px 40px -24px rgba(11, 17, 16, 0.16);
}
.sp-trust__stats--matrix .sp-trust__stat:hover::before {
transform: scaleX(1);
}
.sp-trust__stats--matrix .sp-trust__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--sp-green-soft);
color: var(--sp-green-text);
font-size: 16px;
margin-bottom: 18px;
}
.sp-trust__stats--matrix .sp-trust__num {
font-family: var(--sp-serif);
font-size: clamp(26px, 2.2vw, 34px);
font-weight: 700;
line-height: 1;
color: var(--sp-dark);
letter-spacing: -0.03em;
margin: 0 0 12px;
}
.sp-trust__stats--matrix .sp-trust__num em {
color: var(--sp-green-text);
vertical-align: 0.25em;
}
.sp-trust__stats--matrix .sp-trust__cap {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sp-green-text);
margin: 0 0 8px;
padding-top: 14px;
border-top: 1px solid var(--sp-border);
line-height: 1.2;
}
.sp-trust__stats--matrix .sp-trust__label {
font-size: 12.5px;
line-height: 1.5;
color: var(--sp-muted);
font-weight: 500;
max-width: none;
margin: 0;
}
@media (max-width: 1199.98px) {
.sp-trust__stats--matrix { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
.sp-trust__stats--matrix { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479.98px) {
.sp-trust__stats--matrix { grid-template-columns: 1fr; }
}
.sp-trust__stat {
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
padding-left: 20px;
}
.sp-trust__stat::before {
content: "";
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 3px;
border-radius: 2px;
background: var(--sp-green);
}
.sp-trust__num {
font-size: clamp(38px, 3.4vw, 52px);
font-weight: 700;
line-height: 1;
color: var(--sp-dark);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.sp-trust__num em {
font-style: normal;
color: var(--sp-green);
font-size: 0.55em;
margin-left: 2px;
font-weight: 600;
vertical-align: 0.35em;
}
.sp-trust__label {
font-size: 13px;
line-height: 1.45;
color: var(--sp-muted);
font-weight: 500;
max-width: 220px;
}
.sp-trust__accred {
display: flex;
align-items: center;
gap: 40px;
padding: 40px 0;
border-bottom: 1px solid var(--sp-border);
}
.sp-trust__accred-label {
flex-shrink: 0;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--sp-muted);
}
.sp-trust__accred-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 44px;
flex-wrap: wrap;
flex: 1;
}
.sp-trust__accred-list li {
display: flex;
align-items: center;
justify-content: center;
height: 56px;
}
.sp-trust__accred-list img {
max-height: 52px;
max-width: 120px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(1) contrast(0.85);
opacity: 0.72;
transition: filter 0.3s var(--sp-ease), opacity 0.3s var(--sp-ease), transform 0.3s var(--sp-ease);
}
.sp-trust__accred-list li:hover img {
filter: grayscale(0) contrast(1);
opacity: 1;
transform: translateY(-2px);
}
.sp-trust__quote {
margin: 40px auto 0;
max-width: 780px;
text-align: center;
padding: 0 20px;
}
.sp-trust__stars {
display: inline-flex;
gap: 4px;
color: #f5b842;
font-size: 18px;
margin-bottom: 16px;
}
.sp-trust__quote p {
font-size: clamp(18px, 1.5vw, 22px);
line-height: 1.55;
color: var(--sp-text);
font-weight: 500;
margin: 0 0 18px;
letter-spacing: -0.005em;
}
.sp-trust__quote p strong {
color: var(--sp-dark);
font-weight: 700;
background: linear-gradient(180deg, transparent 62%, var(--sp-green-soft) 62%);
padding: 0 2px;
}
.sp-trust__quote footer {
font-size: 13px;
color: var(--sp-muted);
font-weight: 500;
}
.sp-trust__quote footer strong {
color: var(--sp-dark);
font-weight: 600;
}
.sp-trust__quote footer span[aria-hidden] {
margin: 0 8px;
color: var(--sp-border-2);
}
/* Trust — responsive */
@media (max-width: 1199.98px) {
.sp-trust__accred-list {
gap: 32px;
}
.sp-trust__accred-list img {
max-height: 44px;
max-width: 96px;
}
}
@media (max-width: 991.98px) {
.sp-trust {
padding: 56px 0 48px;
}
.sp-trust__stats {
grid-template-columns: repeat(2, 1fr);
gap: 32px 20px;
}
.sp-trust__accred {
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding: 32px 0;
}
.sp-trust__accred-list {
justify-content: center;
width: 100%;
gap: 28px 32px;
}
.sp-trust__quote {
margin-top: 32px;
}
}
@media (max-width: 575.98px) {
.sp-trust {
padding: 44px 0 40px;
}
.sp-trust__stat {
padding-left: 14px;
}
.sp-trust__num {
font-size: 34px;
}
.sp-trust__label {
font-size: 12.5px;
}
.sp-trust__accred-list {
gap: 20px 24px;
}
.sp-trust__accred-list img {
max-height: 38px;
max-width: 84px;
}
.sp-trust__quote p {
font-size: 17px;
}
}
/* ============================================
BRAND PARTNERS MARQUEE — colourful compact logos
============================================ */
.sp-brands {
position: relative;
z-index: 5;
background: var(--sp-cream);
padding: 18px 0 20px;
overflow: hidden;
}
.sp-brands__label {
display: inline-flex;
align-items: center;
gap: 10px;
width: 100%;
justify-content: center;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sp-muted);
font-weight: 600;
margin-bottom: 14px;
}
.sp-brands__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sp-green);
box-shadow: 0 0 0 3px rgba(107, 181, 68, 0.18);
display: inline-block;
animation: sp-pulse 2.4s infinite;
}
.sp-brands__viewport {
position: relative;
width: 100%;
overflow: hidden;
-webkit-mask-image: linear-gradient(
90deg,
transparent 0,
#000 4%,
#000 96%,
transparent 100%
);
mask-image: linear-gradient(
90deg,
transparent 0,
#000 4%,
#000 96%,
transparent 100%
);
}
.sp-brands__track {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 48px;
width: max-content;
white-space: nowrap;
animation: sp-brands-scroll 40s linear infinite;
will-change: transform;
}
.sp-brands:hover .sp-brands__track {
animation-play-state: paused;
}
.sp-brands__slot {
flex-shrink: 0;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.35s var(--sp-ease-out);
}
.sp-brands__slot:hover {
transform: translateY(-3px);
}
.sp-brands__slot img {
max-height: 100%;
width: auto;
max-width: 120px;
object-fit: contain;
opacity: 0.9;
transition: opacity 0.3s ease;
}
.sp-brands__slot:hover img {
opacity: 1;
}
@keyframes sp-brands-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
.sp-brands__track {
animation: none;
}
.sp-brands__slot:hover {
transform: none;
}
}
@media (max-width: 767.98px) {
.sp-brands {
padding: 14px 0 16px;
}
.sp-brands__label {
font-size: 10px;
margin-bottom: 10px;
}
.sp-brands__track {
gap: 32px;
animation-duration: 38s;
}
.sp-brands__slot {
height: 32px;
}
.sp-brands__slot img {
max-width: 92px;
}
}
/* ============================================
HERO — Full-bleed video background
============================================ */
.sp-hero {
position: relative;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
padding-top: calc(var(--sp-header-h) + var(--sp-topbar-h) + 32px);
padding-bottom: 0;
color: #ffffff;
overflow: hidden;
margin-top: calc(-1 * (var(--sp-header-h) + var(--sp-topbar-h)));
display: flex;
flex-direction: column;
isolation: isolate;
}
@media (max-width: 991.98px) {
.sp-hero {
padding-top: calc(var(--sp-header-h) + 20px);
margin-top: calc(-1 * var(--sp-header-h));
min-height: auto;
}
}
.sp-hero__bg {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 100vw;
max-width: 100vw;
transform: translateX(-50%);
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.sp-hero__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
background: transparent;
filter: saturate(1.1) contrast(1.03) brightness(1);
}
.sp-hero__poster {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Scrim — three stacked gradients:
1) Horizontal: soft darkening on the left where the copy sits.
2) Vertical: light touch top (header) + heavier bottom fade so the
hero blends smoothly into the section below.
3) Extra bottom-only fade to reinforce the fade line. */
.sp-hero__scrim {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
transparent 62%,
rgba(11, 17, 16, 0.55) 82%,
rgba(11, 17, 16, 0.489) 100%
),
linear-gradient(
90deg,
rgba(11, 17, 16, 0.183) 0%,
rgba(11, 17, 16, 0.45) 32%,
rgba(11, 17, 16, 0.15) 60%,
rgba(11, 17, 16, 0) 90%
),
linear-gradient(
180deg,
rgba(11, 17, 16, 0.25) 0%,
rgba(11, 17, 16, 0.08) 20%,
rgba(11, 17, 16, 0.08) 55%,
rgba(11, 17, 16, 0.35) 85%,
rgba(11, 17, 16, 0.256) 100%
);
pointer-events: none;
mix-blend-mode: normal;
}
@media (max-width: 991.98px) {
.sp-hero__scrim {
background:
linear-gradient(
180deg,
rgba(11, 17, 16, 0.55) 0%,
rgba(11, 17, 16, 0.35) 35%,
rgba(11, 17, 16, 0.4) 65%,
rgba(11, 17, 16, 0.9) 100%
);
}
}
.sp-hero__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-size: 90px 90px;
mask-image: radial-gradient(ellipse at 22% 45%, black 12%, transparent 72%);
-webkit-mask-image: radial-gradient(
ellipse at 22% 45%,
black 12%,
transparent 72%
);
pointer-events: none;
opacity: 0.9;
}
.sp-hero__glow {
position: absolute;
width: 720px;
height: 720px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(255, 190, 110, 0.28),
rgba(107, 181, 68, 0.15) 40%,
transparent 65%
);
filter: blur(100px);
top: -220px;
right: -220px;
pointer-events: none;
animation: sp-glow-drift 14s ease-in-out infinite alternate;
mix-blend-mode: screen;
}
@keyframes sp-glow-drift {
from {
transform: translate(0, 0);
}
to {
transform: translate(-40px, 30px);
}
}
.sp-hero__inner {
position: relative;
z-index: 1;
flex: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) 110px;
align-items: center;
gap: 32px;
padding-top: 24px;
padding-bottom: 32px;
}
@media (max-width: 1199.98px) {
.sp-hero__inner {
grid-template-columns: minmax(0, 1fr) 100px;
gap: 24px;
}
}
@media (max-width: 991.98px) {
.sp-hero__inner {
grid-template-columns: 1fr;
gap: 32px;
padding-top: 16px;
padding-bottom: 24px;
}
}
.sp-hero__content {
max-width: 720px;
}
/* ===== Hero stats panel (right rail) — vertical circles ===== */
.sp-hero__stats {
position: relative;
justify-self: center;
align-self: center;
width: 100%;
max-width: 140px;
color: #ffffff;
opacity: 0;
transform: translateY(16px);
animation: sp-rise 0.9s 0.35s var(--sp-ease-out) forwards;
}
@media (max-width: 991.98px) {
.sp-hero__stats {
justify-self: stretch;
max-width: 100%;
}
}
.sp-hero__stats-head {
display: none;
}
.sp-hero__stats-dot,
.sp-hero__stats-sep {
display: none;
}
.sp-hero__stats-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
@media (max-width: 991.98px) {
.sp-hero__stats-list {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
}
.sp-hero__stat {
position: relative;
width: 96px;
height: 96px;
padding: 4px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
text-align: center;
background:
radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.12), transparent 60%),
rgba(9, 14, 13, 0.62);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 50%;
backdrop-filter: blur(20px) saturate(1.15);
-webkit-backdrop-filter: blur(20px) saturate(1.15);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 0 0 1px rgba(255, 255, 255, 0.04),
0 14px 34px -14px rgba(0, 0, 0, 0.7);
transition: transform 0.35s var(--sp-ease-out),
background 0.35s var(--sp-ease-out),
border-color 0.35s var(--sp-ease-out),
box-shadow 0.35s var(--sp-ease-out);
}
.sp-hero__stat::before {
/* subtle green ring accent */
content: "";
position: absolute;
inset: 4px;
border-radius: 50%;
border: 1px dashed rgba(107, 181, 68, 0.32);
pointer-events: none;
opacity: 0.7;
transition: opacity 0.35s var(--sp-ease-out), inset 0.35s var(--sp-ease-out);
}
.sp-hero__stat:hover {
transform: translateY(-3px) scale(1.04);
background:
radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.16), transparent 60%),
rgba(9, 14, 13, 0.72);
border-color: rgba(107, 181, 68, 0.7);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 22px 46px -18px rgba(0, 0, 0, 0.75);
}
.sp-hero__stat:hover::before {
opacity: 1;
inset: 2px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.sp-hero__stat { background: rgba(9, 14, 13, 0.82); }
}
.sp-hero__stat-num {
font-family: inherit;
font-weight: 700;
font-size: 20px;
line-height: 1;
letter-spacing: -0.03em;
color: #ffffff;
white-space: nowrap;
}
.sp-hero__stat-prefix,
.sp-hero__stat-suffix {
color: var(--sp-green-light);
font-weight: 700;
}
.sp-hero__stat-prefix { margin-right: 1px; }
.sp-hero__stat-suffix { margin-left: 1px; font-size: 0.72em; vertical-align: 2px; }
.sp-hero__stat-label {
font-size: 8px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
line-height: 1.15;
max-width: 78px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.sp-hero__stat-num {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
/* Auto-fit height when viewport is shorter */
@media (max-height: 780px) {
.sp-hero__stat { width: 86px; height: 86px; }
.sp-hero__stat-num { font-size: 18px; }
.sp-hero__stat-label { font-size: 7.5px; max-width: 70px; }
.sp-hero__stats-list { gap: 8px; }
}
@media (max-height: 680px) {
.sp-hero__stat { width: 78px; height: 78px; }
.sp-hero__stat-num { font-size: 16px; }
.sp-hero__stat-label { font-size: 7px; max-width: 64px; }
.sp-hero__stats-list { gap: 6px; }
}
@media (max-width: 1199.98px) {
.sp-hero__stat { width: 90px; height: 90px; }
.sp-hero__stat-num { font-size: 18px; }
}
@media (max-width: 575.98px) {
.sp-hero__stat { width: 84px; height: 84px; }
.sp-hero__stat-num { font-size: 17px; }
}
.sp-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #ffffff;
padding: 8px 8px 8px 14px;
background: rgba(11, 17, 16, 0.7);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
margin-bottom: 32px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
opacity: 0;
transform: translateY(16px);
animation: sp-rise 0.8s 0.1s var(--sp-ease-out) forwards;
box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.5);
}
.sp-hero__eyebrow-dot {
width: 8px;
height: 8px;
background: var(--sp-green-light);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(107, 181, 68, 0.32);
animation: sp-pulse 2.4s infinite;
flex-shrink: 0;
}
.sp-hero__eyebrow-badge {
padding: 4px 12px;
background: var(--sp-green);
color: #ffffff;
border: 1px solid var(--sp-green);
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.12em;
margin-left: 4px;
box-shadow: 0 4px 12px -4px rgba(107, 181, 68, 0.55);
}
/* Hero slides — auto-rotating title/lede stack, grid-layered so the
container height is always the max of all slides (no layout jump). */
.sp-hero__slides {
display: grid;
grid-template-areas: "stack";
margin-bottom: 40px;
}
.sp-hero__slide {
grid-area: stack;
opacity: 0;
visibility: hidden;
transform: translateY(24px);
/* Exit: quick fade + slide down slightly */
transition:
opacity 0.35s ease,
transform 0.5s var(--sp-ease-out),
visibility 0s linear 0.5s;
pointer-events: none;
}
.sp-hero__slide.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
/* Enter: wait for outgoing slide to fade, then rise + fade in */
transition:
opacity 0.55s var(--sp-ease-out) 0.35s,
transform 0.65s var(--sp-ease-out) 0.35s,
visibility 0s linear 0.35s;
}
.sp-hero__slide .sp-hero__title,
.sp-hero__slide .sp-hero__lede {
margin-bottom: 0;
}
.sp-hero__slide .sp-hero__title {
margin-bottom: 24px;
}
/* Per-line reveal on the active slide's title — restarts every slide
change because JS toggles a .is-animating class to reset the keyframes. */
.sp-hero__slide.is-active .sp-hero__title .sp-line > span {
animation: sp-slideup 0.9s var(--sp-ease-out) both;
}
.sp-hero__slide.is-active .sp-hero__title .sp-line:nth-child(1) > span {
animation-delay: 0.4s;
}
.sp-hero__slide.is-active .sp-hero__title .sp-line:nth-child(2) > span {
animation-delay: 0.5s;
}
.sp-hero__slide.is-active .sp-hero__title .sp-line:nth-child(3) > span {
animation-delay: 0.6s;
}
/* Slide indicator dots — thin capsule bars, active fills green */
.sp-hero__dots {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 32px;
padding: 0;
}
.sp-hero__dot {
width: 28px;
height: 3px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.22);
cursor: pointer;
transition:
background 0.3s ease,
width 0.4s var(--sp-ease-out);
position: relative;
overflow: hidden;
}
.sp-hero__dot:hover {
background: rgba(255, 255, 255, 0.4);
}
.sp-hero__dot.is-active {
width: 44px;
background: rgba(255, 255, 255, 0.2);
}
.sp-hero__dot.is-active::after {
content: "";
position: absolute;
inset: 0;
background: var(--sp-green);
transform-origin: left;
animation: sp-hero-dot-fill 6.5s linear forwards;
}
@keyframes sp-hero-dot-fill {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.sp-hero__dots.is-paused .sp-hero__dot.is-active::after {
animation-play-state: paused;
}
.sp-hero__title {
font-size: clamp(44px, 4.8vw, 76px);
line-height: 1.02;
letter-spacing: -0.03em;
font-weight: 700;
margin: 0 0 28px;
color: #ffffff;
text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
max-width: 18ch;
}
.sp-hero__title em {
font-family: var(--sp-serif);
font-style: normal;
font-weight: 700;
color: var(--sp-green);
letter-spacing: -0.01em;
}
.sp-hero__title .sp-line {
display: block;
overflow: hidden;
padding-bottom: 6px;
}
.sp-hero__title .sp-line > span {
display: inline-block;
}
.sp-hero__title .sp-line:nth-child(1) > span {
animation: sp-slideup 1s 0.2s var(--sp-ease-out) both;
}
.sp-hero__title .sp-line:nth-child(2) > span {
animation: sp-slideup 1s 0.34s var(--sp-ease-out) both;
}
.sp-hero__title .sp-line:nth-child(3) > span {
animation: sp-slideup 1s 0.48s var(--sp-ease-out) both;
}
@keyframes sp-slideup {
from {
transform: translateY(105%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes sp-rise {
to {
opacity: 1;
transform: translateY(0);
}
}
.sp-hero__lede {
font-size: clamp(16px, 1.15vw, 19px);
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
max-width: 620px;
margin: 0 0 12px;
font-weight: 400;
opacity: 0;
animation: sp-rise 0.8s 0.65s var(--sp-ease-out) forwards;
}
.sp-hero__lede strong {
color: #ffffff;
font-weight: 600;
}
.sp-hero__ctas {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
opacity: 0;
animation: sp-rise 0.8s 0.8s var(--sp-ease-out) forwards;
}
.sp-hero__ctas .sp-btn {
height: 60px;
padding: 0 26px;
font-size: 15px;
}
.sp-hero__ctas .sp-btn > span {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
line-height: 1;
text-align: left;
}
.sp-hero__ctas .sp-btn > span em {
font-style: normal;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--btn-color);
opacity: 0.65;
font-weight: 600;
transition: color 0.3s var(--sp-ease), opacity 0.3s var(--sp-ease);
}
.sp-hero__ctas .sp-btn > span strong {
font-size: 16px;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--btn-color);
transition: color 0.3s var(--sp-ease);
}
/* Proof strip beneath the CTAs */
.sp-hero__proof {
list-style: none;
padding: 0;
margin: 26px 0 0;
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
opacity: 0;
animation: sp-rise 0.8s 1s var(--sp-ease-out) forwards;
}
.sp-hero__proof li {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
letter-spacing: 0.01em;
}
.sp-hero__proof i {
color: var(--sp-green-light);
font-size: 14px;
}
@media (max-width: 575.98px) {
.sp-hero__proof {
margin-top: 22px;
gap: 8px 16px;
}
.sp-hero__proof li { font-size: 11.5px; }
}
.sp-hero__microcta {
margin: 14px 0 0;
font-size: 13px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.72);
letter-spacing: 0.01em;
opacity: 0;
animation: sp-rise 0.8s 0.9s var(--sp-ease-out) forwards;
}
.sp-hero__microcta a {
color: #ffffff;
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
transition: border-color 0.2s ease;
}
.sp-hero__microcta a:hover {
border-bottom-color: var(--sp-green-light);
}
.sp-hero__microcta span[aria-hidden] {
margin: 0 8px;
color: rgba(255, 255, 255, 0.35);
}
/* Trust — compact inline row */
.sp-hero__trust {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px 32px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
max-width: 820px;
opacity: 0;
animation: sp-rise 0.8s 0.95s var(--sp-ease-out) forwards;
}
.sp-hero__trust-item {
display: flex;
flex-direction: column;
min-width: 0;
}
.sp-hero__trust-divider {
width: 1px;
height: 28px;
background: rgba(255, 255, 255, 0.12);
flex-shrink: 0;
}
@media (max-width: 767.98px) {
.sp-hero__trust {
gap: 16px 20px;
padding-top: 20px;
}
.sp-hero__trust-divider {
display: none;
}
}
.sp-hero__trust-num {
font-size: clamp(22px, 1.9vw, 28px);
line-height: 1;
font-weight: 700;
letter-spacing: -0.02em;
color: #ffffff;
margin-bottom: 6px;
}
.sp-hero__trust-num em {
font-family: var(--sp-serif);
font-style: normal;
font-weight: 400;
color: var(--sp-green);
}
.sp-hero__trust-label {
font-size: 12.5px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.65);
letter-spacing: 0.01em;
max-width: 220px;
}
/* Live-installation chip — floats top-right over the video */
.sp-hero__chip {
position: absolute;
top: calc(var(--sp-header-h) + 24px);
right: 24px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
color: #ffffff;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0;
animation: sp-rise 0.8s 1.1s var(--sp-ease-out) forwards;
box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.4);
}
.sp-hero__chip-pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--sp-green);
box-shadow: 0 0 0 4px rgba(107, 181, 68, 0.28);
animation: sp-pulse 1.8s infinite;
flex-shrink: 0;
}
@media (max-width: 767.98px) {
.sp-hero__chip {
top: calc(var(--sp-header-h) + 16px);
right: 16px;
padding: 8px 14px;
font-size: 10px;
}
}
@media (max-width: 575.98px) {
.sp-hero__chip {
display: none;
}
}
/* Vertical scroll indicator — centered, above the ticker */
.sp-hero__scroll {
position: absolute;
bottom: 110px;
right: 32px;
z-index: 3;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.6);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
opacity: 0;
animation: sp-rise 1s 1.3s var(--sp-ease-out) forwards;
transition: color 0.3s ease;
}
.sp-hero__scroll:hover {
color: #ffffff;
}
.sp-hero__scroll-line {
width: 1px;
height: 52px;
background: linear-gradient(
180deg,
transparent,
rgba(255, 255, 255, 0.35),
transparent
);
position: relative;
overflow: hidden;
}
.sp-hero__scroll-line::after {
content: "";
position: absolute;
top: -50%;
left: 0;
width: 100%;
height: 60%;
background: linear-gradient(180deg, transparent, var(--sp-green));
animation: sp-scroll-dot 2.4s ease-in-out infinite;
}
@keyframes sp-scroll-dot {
0% {
top: -60%;
opacity: 0;
}
30% {
opacity: 1;
}
100% {
top: 110%;
opacity: 0;
}
}
@media (max-width: 991.98px) {
.sp-hero__scroll {
display: none;
}
}
/* Bottom trust ticker — glassy dark bar */
.sp-hero__ticker {
position: relative;
z-index: 2;
margin-top: auto;
padding: 22px 0;
background: rgba(11, 17, 16, 0.55);
backdrop-filter: blur(6px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-top: 1px solid rgba(255, 255, 255, 0.08);
opacity: 0;
animation: sp-rise 1s 1.15s var(--sp-ease-out) forwards;
}
.sp-hero__ticker-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
@media (max-width: 767.98px) {
.sp-hero__ticker-inner {
justify-content: center;
text-align: center;
}
}
.sp-hero__ticker-label {
font-size: 12.5px;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.01em;
flex-shrink: 0;
}
.sp-hero__ticker-marks {
display: flex;
flex-wrap: wrap;
gap: 28px;
align-items: center;
}
@media (max-width: 767.98px) {
.sp-hero__ticker-marks {
gap: 18px;
justify-content: center;
}
}
.sp-hero__ticker-marks span {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
letter-spacing: 0.02em;
}
.sp-hero__ticker-marks i {
color: var(--sp-green);
font-size: 16px;
}
/* ============================================
ENERGY SOLUTIONS FOR EVERY SCALE
Premium asymmetric experience section
============================================ */
.sp-solutions-x {
background: var(--sp-cream);
padding: 120px 0;
}
@media (max-width: 767.98px) {
.sp-solutions-x {
padding: 72px 0;
}
}
/* ---- Grid & unified premium cards ---- */
.sp-solutions-x__grid {
align-items: stretch;
}
.sp-x-card {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
min-height: 460px;
padding: 32px 28px 28px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 20px;
overflow: hidden;
color: var(--sp-dark);
text-decoration: none;
isolation: isolate;
transition:
transform 0.5s var(--sp-ease-out),
box-shadow 0.5s ease,
border-color 0.5s ease;
box-shadow: 0 2px 12px -6px rgba(11, 17, 16, 0.06);
}
.sp-x-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at 100% 0%,
rgba(107, 181, 68, 0.06),
transparent 50%
);
opacity: 0;
transition: opacity 0.5s ease;
z-index: 0;
pointer-events: none;
}
.sp-x-card:hover {
transform: translateY(-6px);
border-color: rgba(107, 181, 68, 0.5);
box-shadow: 0 28px 56px -24px rgba(11, 17, 16, 0.2);
}
.sp-x-card:hover::before {
opacity: 1;
}
@media (max-width: 991.98px) {
.sp-x-card {
min-height: 440px;
padding: 32px 28px 28px;
}
}
/* Top accent bar — subtle wipe on hover */
.sp-x-card__accent {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--sp-green), var(--sp-green-dark));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.6s var(--sp-ease-out);
z-index: 3;
}
.sp-x-card:hover .sp-x-card__accent {
transform: scaleX(1);
}
/* Head — icon left, serif italic number right */
.sp-x-card__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
position: relative;
z-index: 2;
}
.sp-x-card__icon {
width: 56px;
height: 56px;
border-radius: 16px;
background: var(--sp-light);
color: var(--sp-dark);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
transition:
background 0.35s ease,
color 0.35s ease;
}
.sp-x-card:hover .sp-x-card__icon {
background: linear-gradient(180deg, var(--sp-green), var(--sp-green-dark));
color: var(--sp-dark);
}
.sp-x-card__num {
font-family: var(--sp-serif);
font-style: normal;
font-weight: 400;
font-size: 34px;
color: var(--sp-border-2);
line-height: 1;
letter-spacing: -0.01em;
transition: color 0.4s ease;
}
.sp-x-card:hover .sp-x-card__num {
color: var(--sp-green-text);
}
/* Body — type, title, description */
.sp-x-card__body {
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
z-index: 2;
}
.sp-x-card__type {
font-size: 10.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sp-muted);
font-weight: 600;
}
.sp-x-card__title {
font-size: clamp(22px, 1.5vw, 26px);
line-height: 1.1;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--sp-dark);
margin: 0;
}
.sp-x-card__desc {
font-size: 14px;
line-height: 1.55;
color: var(--sp-muted);
margin: 0;
}
/* Mid — service pills */
.sp-x-card__mid {
flex: 0.5;
display: flex;
align-items: flex-end;
position: relative;
z-index: 2;
}
.sp-x-card__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sp-x-card__list li {
display: inline-flex;
align-items: center;
padding: 5px 11px;
background: var(--sp-light);
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
color: var(--sp-dark);
letter-spacing: 0.01em;
transition:
background 0.3s ease,
color 0.3s ease;
}
.sp-x-card:hover .sp-x-card__list li {
background: var(--sp-green-soft);
color: var(--sp-green-text);
}
/* Foot — CTA */
.sp-x-card__foot {
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid var(--sp-border);
position: relative;
z-index: 2;
}
.sp-x-card__cta {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--sp-dark);
transition:
color 0.3s ease,
gap 0.3s var(--sp-ease);
}
.sp-x-card__cta i {
transition: transform 0.35s var(--sp-ease);
font-size: 14px;
}
.sp-x-card:hover .sp-x-card__cta {
color: var(--sp-green-text);
gap: 16px;
}
.sp-x-card:hover .sp-x-card__cta i {
transform: translateX(4px);
}
/* ---- Service index (footer of section) ---- */
.sp-solutions-x__index {
margin-top: 72px;
padding-top: 32px;
border-top: 1px solid var(--sp-border);
display: flex;
align-items: baseline;
gap: 40px;
flex-wrap: wrap;
}
.sp-solutions-x__index-label {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sp-muted);
font-weight: 600;
flex-shrink: 0;
}
.sp-solutions-x__index-links {
display: flex;
flex-wrap: wrap;
gap: 6px 28px;
align-items: baseline;
}
.sp-solutions-x__index-links a {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 500;
color: var(--sp-dark);
padding: 6px 0;
border-bottom: 1px solid transparent;
transition:
color 0.25s ease,
gap 0.25s var(--sp-ease),
border-color 0.25s ease;
}
.sp-solutions-x__index-links a i {
font-size: 14px;
color: var(--sp-green-text);
transition: transform 0.25s var(--sp-ease);
}
.sp-solutions-x__index-links a:hover {
color: var(--sp-green-text);
gap: 12px;
border-bottom-color: var(--sp-green);
}
.sp-solutions-x__index-links a:hover i {
transform: translateX(3px);
}
@media (max-width: 767.98px) {
.sp-solutions-x__index {
margin-top: 48px;
gap: 20px;
}
.sp-solutions-x__index-links {
gap: 4px 20px;
}
.sp-solutions-x__index-links a {
font-size: 14px;
}
}
/* ============================================
MARQUEE — kept for legacy
============================================ */
.sp-marquee {
background: var(--sp-dark);
color: #ffffff;
overflow: hidden;
padding: 22px 0;
}
.sp-marquee__track {
display: inline-flex;
align-items: center;
gap: 40px;
white-space: nowrap;
animation: sp-marquee 45s linear infinite;
font-family: var(--sp-serif);
font-style: normal;
font-size: 34px;
line-height: 1;
color: rgba(255, 255, 255, 0.95);
padding-left: 40px;
}
.sp-marquee__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--sp-green);
display: inline-block;
}
@keyframes sp-marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* ============================================
SECTION HEAD
============================================ */
.sp-section {
padding: 128px 0;
position: relative;
}
@media (max-width: 991.98px) {
.sp-section {
padding: 96px 0;
}
}
@media (max-width: 575.98px) {
.sp-section {
padding: 72px 0;
}
}
.sp-section__head {
display: block;
margin-bottom: 48px;
max-width: 900px;
}
.sp-section__head--center {
text-align: center;
grid-template-columns: 1fr;
justify-items: center;
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.sp-section__head--slim {
grid-template-columns: 1fr;
margin-bottom: 40px;
}
.sp-section__head .sp-label {
margin-bottom: 20px;
display: inline-flex;
}
.sp-section__intro {
font-size: 17px;
color: var(--sp-muted);
max-width: 720px;
margin: 18px 0 0;
line-height: 1.6;
}
.sp-section__intro--dark {
color: rgba(255, 255, 255, 0.65);
}
.sp-section__intro .sp-note {
display: block;
margin-top: 12px;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--sp-green-text);
opacity: 0.7;
}
.sp-section__head--dark .sp-note {
color: var(--sp-green);
}
@media (max-width: 991.98px) {
.sp-section__head {
margin-bottom: 36px;
}
.sp-section__head--center {
justify-items: center;
text-align: center;
}
}
/* Section headings — one consistent size across the site */
.sp-h2 {
font-size: clamp(36px, 3.8vw, 58px);
line-height: 1.08;
letter-spacing: -0.025em;
font-weight: 600;
color: var(--sp-dark);
margin: 0;
}
.sp-h2 em {
font-family: var(--sp-serif);
font-style: normal;
font-weight: 600;
color: var(--sp-green-text);
letter-spacing: -0.005em;
}
.sp-h2--light {
color: #ffffff;
}
.sp-h2--light em {
color: var(--sp-green);
}
.sp-h2--center {
text-align: center;
}
.sp-h2--small {
font-size: clamp(30px, 3.2vw, 46px);
}
/* ============================================
CUSTOMER JOURNEYS
============================================ */
.sp-journeys {
background: var(--sp-light);
}
/* Carousel — replaces the old grid */
.sp-journeys__carousel {
position: relative;
}
.sp-journeys__viewport {
overflow: hidden;
}
.sp-journeys__track {
display: flex;
gap: 20px;
transition: transform 0.65s var(--sp-ease-out);
will-change: transform;
}
.sp-journeys__track .sp-journey {
flex: 0 0 calc((100% - 40px) / 3); /* 3 per view, 20px gap × 2 = 40px */
min-height: 580px;
}
@media (max-width: 991.98px) {
.sp-journeys__track {
gap: 16px;
}
.sp-journeys__track .sp-journey {
flex: 0 0 calc((100% - 16px) / 2);
min-height: 520px;
}
}
@media (max-width: 575.98px) {
.sp-journeys__track .sp-journey {
flex: 0 0 100%;
}
}
/* Section head layout with intro + controls on the right */
.sp-section__head-right {
display: flex;
flex-direction: column;
gap: 20px;
align-items: flex-start;
}
@media (max-width: 991.98px) {
.sp-section__head-right {
align-items: stretch;
}
}
.sp-journeys__controls {
display: inline-flex;
gap: 8px;
}
.sp-journeys__ctrl {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1.5px solid var(--sp-border-2);
background: #ffffff;
color: var(--sp-dark);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
transition: all 0.3s var(--sp-ease);
}
.sp-journeys__ctrl:hover {
background: var(--sp-dark);
color: #ffffff;
border-color: var(--sp-dark);
}
.sp-journeys__ctrl:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.sp-journeys__ctrl:disabled:hover {
background: #ffffff;
color: var(--sp-dark);
border-color: var(--sp-border-2);
}
.sp-journey {
position: relative;
display: block;
border-radius: var(--sp-radius-lg);
overflow: hidden;
background: var(--sp-dark);
color: #ffffff;
isolation: isolate;
box-shadow: 0 20px 50px -20px rgba(11, 17, 16, 0.25);
transition: transform 0.5s var(--sp-ease-out);
}
.sp-journey--home {
grid-row: 1 / 2;
}
.sp-journey--business {
grid-row: 1 / 2;
margin-top: 32px;
}
.sp-journey--dev {
grid-row: 1 / 2;
}
@media (max-width: 991.98px) {
.sp-journey--home,
.sp-journey--business,
.sp-journey--dev {
margin-top: 0;
grid-row: auto;
}
}
.sp-journey__media {
position: absolute;
inset: 0;
}
.sp-journey__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--sp-ease-out);
}
.sp-journey::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(11, 17, 16, 0.1) 0%,
rgba(11, 17, 16, 0.75) 100%
);
z-index: 1;
}
.sp-journey__body {
position: absolute;
inset: auto 28px 28px 28px;
z-index: 2;
}
.sp-journey__index {
display: inline-flex;
align-items: center;
padding: 4px 10px;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sp-green);
background: rgba(107, 181, 68, 0.15);
border: 1px solid rgba(107, 181, 68, 0.3);
border-radius: 999px;
margin-bottom: 16px;
font-weight: 600;
}
.sp-journey__body h3 {
font-size: 36px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
margin: 0 0 12px;
}
.sp-journey__body p {
font-size: 14.5px;
color: rgba(255, 255, 255, 0.78);
margin: 0 0 18px;
line-height: 1.55;
}
.sp-journey__features {
list-style: none;
padding: 0;
margin: 0 0 22px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 14px;
}
.sp-journey__features li {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: rgba(255, 255, 255, 0.82);
line-height: 1.35;
}
.sp-journey__features i {
color: var(--sp-green);
font-size: 14px;
flex-shrink: 0;
}
.sp-journey__body .sp-arrow-link {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.3);
font-size: 13px;
}
.sp-journey__body .sp-arrow-link:hover {
color: var(--sp-green);
border-color: var(--sp-green);
}
.sp-journey:hover {
transform: translateY(-4px);
}
.sp-journey:hover .sp-journey__media img {
transform: scale(1.06);
}
/* ============================================
ENERGY ECOSYSTEM
============================================ */
.sp-eco {
background:
radial-gradient(
ellipse at 20% 25%,
rgba(107, 181, 68, 0.09) 0%,
transparent 55%
),
radial-gradient(
ellipse at 80% 75%,
rgba(107, 181, 68, 0.07) 0%,
transparent 55%
),
linear-gradient(180deg, #ffffff 0%, var(--sp-cream) 50%, #ffffff 100%);
color: var(--sp-dark);
overflow: hidden;
isolation: isolate;
}
.sp-eco__bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.sp-eco__glow {
position: absolute;
border-radius: 50%;
filter: blur(120px);
pointer-events: none;
}
.sp-eco__glow--a {
width: 640px;
height: 640px;
background: radial-gradient(
circle,
rgba(107, 181, 68, 0.18),
transparent 65%
);
top: -220px;
left: -160px;
animation: sp-glow-drift 18s ease-in-out infinite alternate;
}
.sp-eco__glow--b {
width: 560px;
height: 560px;
background: radial-gradient(
circle,
rgba(184, 224, 130, 0.14),
transparent 65%
);
bottom: -200px;
right: -140px;
animation: sp-glow-drift 22s ease-in-out infinite alternate-reverse;
}
.sp-eco__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(11, 17, 16, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(11, 17, 16, 0.035) 1px, transparent 1px);
background-size: 90px 90px;
background-position: center;
mask-image: radial-gradient(ellipse at 50% 45%, black 15%, transparent 78%);
-webkit-mask-image: radial-gradient(
ellipse at 50% 45%,
black 15%,
transparent 78%
);
opacity: 0.9;
}
/* 2-column layout: diagram left, form right */
.sp-eco__layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: start;
}
@media (max-width: 991.98px) {
.sp-eco__layout {
grid-template-columns: 1fr;
gap: 40px;
}
}
.sp-eco__viz {
display: flex;
flex-direction: column;
gap: 24px;
}
.sp-eco__stage {
position: relative;
aspect-ratio: 1 / 1;
max-width: 560px;
width: 100%;
margin: 0 auto;
}
@media (max-width: 767.98px) {
.sp-eco__stage {
aspect-ratio: 1 / 1;
max-width: 460px;
}
}
.sp-eco__viz-caption {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 12px;
color: var(--sp-text-2);
font-size: 13px;
line-height: 1.5;
margin: 0;
max-width: 560px;
margin-left: auto;
margin-right: auto;
width: 100%;
box-shadow: 0 8px 20px -12px rgba(11, 17, 16, 0.08);
}
.sp-eco__viz-dot {
width: 8px;
height: 8px;
background: var(--sp-green);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(107, 181, 68, 0.22);
animation: sp-pulse 2.4s infinite;
flex-shrink: 0;
}
.sp-eco__wires {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.sp-eco__node {
position: absolute;
top: var(--y);
left: var(--x);
transform: translate(-50%, -50%);
background: none;
border: 0;
cursor: pointer;
color: var(--sp-dark);
text-align: center;
padding: 0;
}
.sp-eco__node-inner {
display: flex;
align-items: center;
justify-content: center;
width: 88px;
height: 88px;
border-radius: 50%;
background: #ffffff;
border: 1px solid var(--sp-border);
font-size: 32px;
color: var(--sp-dark);
position: relative;
transition: all 0.35s var(--sp-ease);
box-shadow: 0 12px 30px -14px rgba(11, 17, 16, 0.18);
}
.sp-eco__node-inner::before {
content: "";
position: absolute;
inset: -8px;
border-radius: 50%;
border: 1px solid rgba(107, 181, 68, 0.35);
animation: sp-ring 4s infinite ease-out;
opacity: 0;
}
@keyframes sp-ring {
0% {
opacity: 0.8;
transform: scale(0.9);
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
.sp-eco__node-label {
display: block;
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-top: 14px;
color: var(--sp-muted);
font-weight: 600;
}
.sp-eco__node:hover .sp-eco__node-inner,
.sp-eco__node.is-active .sp-eco__node-inner {
background: linear-gradient(180deg, var(--sp-green), var(--sp-green-dark));
color: var(--sp-dark);
border-color: var(--sp-green);
box-shadow:
0 0 40px rgba(123, 203, 85, 0.35),
0 20px 30px -14px rgba(11, 17, 16, 0.25);
transform: scale(1.08);
}
.sp-eco__node.is-active .sp-eco__node-inner::before {
animation-play-state: running;
opacity: 1;
}
.sp-eco__node.is-active .sp-eco__node-label {
color: var(--sp-dark);
}
@media (max-width: 767.98px) {
.sp-eco__node-inner {
width: 72px;
height: 72px;
font-size: 26px;
}
.sp-eco__node-label {
font-size: 10px;
}
}
/* ---- Right column: lead-gen form (light) ---- */
.sp-eco__form-card {
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius-lg);
padding: 36px;
box-shadow: 0 24px 60px -30px rgba(11, 17, 16, 0.18);
}
@media (max-width: 767.98px) {
.sp-eco__form-card {
padding: 26px 22px;
}
}
.sp-eco__form-head {
margin-bottom: 24px;
}
.sp-eco__form-head .sp-label {
margin-bottom: 14px;
display: inline-flex;
}
.sp-eco__form-title {
font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--sp-dark);
margin: 0 0 10px;
font-weight: 600;
}
.sp-eco__form-title em {
font-family: var(--sp-serif);
font-style: normal;
font-weight: 700;
color: var(--sp-green-text);
}
.sp-eco__form-lede {
color: var(--sp-muted);
font-size: 14px;
line-height: 1.55;
margin: 0;
}
.sp-eco__form {
display: grid;
gap: 14px;
}
.sp-eco__form-row {
display: grid;
gap: 14px;
}
.sp-eco__form-row--2 {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 575.98px) {
.sp-eco__form-row--2 {
grid-template-columns: 1fr;
}
}
.sp-eco__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.sp-eco__field > span {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sp-muted);
font-weight: 600;
}
.sp-eco__field input,
.sp-eco__field select {
height: 46px;
padding: 0 14px;
background: var(--sp-light);
border: 1px solid transparent;
border-radius: 10px;
color: var(--sp-dark);
font-family: inherit;
font-size: 14px;
transition:
border-color 0.25s ease,
background 0.25s ease;
appearance: none;
-webkit-appearance: none;
}
.sp-eco__field select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.sp-eco__field input::placeholder {
color: var(--sp-muted-2);
}
.sp-eco__field input:focus,
.sp-eco__field select:focus {
outline: 0;
border-color: var(--sp-green);
background: #ffffff;
box-shadow: 0 0 0 3px rgba(107, 181, 68, 0.14);
}
.sp-eco__form-fieldset {
border: 0;
padding: 0;
margin: 0;
}
.sp-eco__form-fieldset legend {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sp-muted);
font-weight: 600;
margin-bottom: 8px;
padding: 0;
}
.sp-eco__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sp-eco__chip {
position: relative;
cursor: pointer;
}
.sp-eco__chip input {
position: absolute;
opacity: 0;
inset: 0;
cursor: pointer;
}
.sp-eco__chip > span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: var(--sp-light);
border: 1px solid transparent;
border-radius: 999px;
color: var(--sp-dark);
font-size: 12.5px;
font-weight: 600;
transition: all 0.2s ease;
}
.sp-eco__chip > span i {
color: var(--sp-green-text);
font-size: 13px;
}
.sp-eco__chip:hover > span {
border-color: var(--sp-green);
}
.sp-eco__chip:has(input:checked) > span {
background: var(--sp-green-soft);
border-color: var(--sp-green);
color: var(--sp-green-text);
}
.sp-eco__form-submit {
width: 100%;
margin-top: 8px;
}
.sp-eco__form-note {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 12px 0 0;
font-size: 12px;
color: var(--sp-muted);
}
.sp-eco__form-note i {
color: var(--sp-green-text);
font-size: 14px;
}
/* ============================================
SOLUTIONS — magazine-style horizontal strips
============================================ */
.sp-solutions {
background: var(--sp-white);
}
/* Enhanced head just for this section */
.sp-solutions__head {
align-items: end;
gap: 64px;
}
.sp-solutions__head-left {
position: relative;
}
.sp-solutions__head-rule {
display: block;
width: 56px;
height: 3px;
margin-top: 28px;
border-radius: 3px;
background: linear-gradient(90deg, var(--sp-green), var(--sp-green-dark));
}
.sp-solutions__head-right {
display: flex;
flex-direction: column;
gap: 28px;
}
.sp-solutions__head-stats {
list-style: none;
padding: 24px 0 0;
margin: 0;
border-top: 1px solid var(--sp-border);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px 28px;
}
@media (max-width: 575.98px) {
.sp-solutions__head-stats {
grid-template-columns: 1fr 1fr;
}
.sp-solutions__head-stats li:last-child {
grid-column: 1 / -1;
}
}
.sp-solutions__head-stats li {
display: flex;
flex-direction: column;
gap: 6px;
}
.sp-solutions__head-stats strong {
display: block;
font-size: clamp(24px, 2.2vw, 30px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: var(--sp-dark);
}
.sp-solutions__head-stats strong em {
font-family: var(--sp-serif);
font-style: normal;
font-weight: 400;
color: var(--sp-green-text);
font-size: 0.8em;
}
.sp-solutions__head-stats span {
font-size: 11.5px;
color: var(--sp-muted);
letter-spacing: 0.02em;
line-height: 1.4;
}
.sp-svc-strips[hidden] {
display: none !important;
}
.sp-svc-strips {
display: flex;
flex-direction: column;
gap: 0;
margin-top: 32px;
}
.sp-svc-strip {
position: relative;
padding: 56px 0;
border-top: 1px solid var(--sp-border);
}
.sp-svc-strip:first-child {
border-top: 0;
padding-top: 24px;
}
.sp-svc-strip:last-child {
padding-bottom: 24px;
}
@media (max-width: 991.98px) {
.sp-svc-strip {
padding: 40px 0;
}
}
.sp-svc-strip__inner {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 72px;
align-items: center;
color: var(--sp-dark);
text-decoration: none;
}
.sp-svc-strip--reverse .sp-svc-strip__inner {
direction: rtl;
}
.sp-svc-strip--reverse .sp-svc-strip__media,
.sp-svc-strip--reverse .sp-svc-strip__content {
direction: ltr;
}
@media (max-width: 991.98px) {
.sp-svc-strip__inner {
grid-template-columns: 1fr;
gap: 28px;
direction: ltr !important;
}
}
/* Media — cleaner frame, softer shadow, corner accent */
.sp-svc-strip__media {
position: relative;
aspect-ratio: 5 / 4;
overflow: hidden;
border-radius: 24px;
background: var(--sp-light);
box-shadow:
0 1px 3px rgba(11, 17, 16, 0.06),
0 30px 60px -30px rgba(11, 17, 16, 0.28);
transition: box-shadow 0.5s var(--sp-ease);
}
.sp-svc-strip:hover .sp-svc-strip__media {
box-shadow:
0 1px 3px rgba(11, 17, 16, 0.06),
0 40px 80px -30px rgba(11, 17, 16, 0.38);
}
.sp-svc-strip__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.6s var(--sp-ease-out);
}
.sp-svc-strip:hover .sp-svc-strip__media img {
transform: scale(1.06);
}
.sp-svc-strip__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
transparent 45%,
rgba(11, 17, 16, 0.4) 100%
);
pointer-events: none;
}
/* Green accent bar in the corner of the image */
.sp-svc-strip__media::before {
content: "";
position: absolute;
bottom: 20px;
left: 20px;
width: 44px;
height: 4px;
background: var(--sp-green-light);
border-radius: 4px;
z-index: 2;
box-shadow: 0 4px 14px rgba(107, 181, 68, 0.5);
}
/* Big display number — overlaps the image edge, editorial serif */
.sp-svc-strip__num {
position: absolute;
top: -10px;
right: -10px;
z-index: 3;
padding: 0;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-radius: 0;
font-family: var(--sp-serif);
font-style: normal;
font-weight: 700;
font-size: clamp(72px, 8vw, 128px);
color: var(--sp-white);
line-height: 0.85;
letter-spacing: -0.05em;
text-shadow:
0 2px 0 var(--sp-green-dark),
0 20px 40px rgba(11, 17, 16, 0.35);
pointer-events: none;
}
.sp-svc-strip--reverse .sp-svc-strip__num {
right: auto;
left: -10px;
}
@media (max-width: 991.98px) {
.sp-svc-strip__num {
top: -6px;
right: -6px;
font-size: 68px;
}
.sp-svc-strip--reverse .sp-svc-strip__num {
left: -6px;
}
}
/* Content */
.sp-svc-strip__content {
display: flex;
flex-direction: column;
gap: 18px;
padding: 8px 0;
}
.sp-svc-strip__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sp-green-text);
}
.sp-svc-strip__eyebrow::before {
content: "";
width: 36px;
height: 2px;
background: linear-gradient(90deg, var(--sp-green), transparent);
border-radius: 2px;
}
.sp-svc-strip__title {
font-size: clamp(32px, 3.8vw, 56px);
line-height: 1;
letter-spacing: -0.035em;
font-weight: 700;
color: var(--sp-dark);
margin: 0;
}
.sp-svc-strip__desc {
font-size: 17px;
line-height: 1.6;
color: var(--sp-muted);
margin: 0;
max-width: 52ch;
}
.sp-svc-strip__sub {
list-style: none;
padding: 24px 0 4px;
margin: 4px 0 0;
border-top: 1px solid var(--sp-border);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 24px;
}
@media (max-width: 575.98px) {
.sp-svc-strip__sub {
grid-template-columns: 1fr;
}
}
.sp-svc-strip__sub li {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
font-weight: 500;
color: var(--sp-text);
}
.sp-svc-strip__sub li::before {
content: "";
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--sp-green-soft);
border: 1px solid rgba(107, 181, 68, 0.4);
flex-shrink: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
}
/* CTA — proper pill button, not just a link */
.sp-svc-strip__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
border: 1px solid var(--sp-dark);
background: transparent;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sp-dark);
align-self: flex-start;
margin-top: 14px;
transition:
color 0.3s ease,
background 0.3s ease,
border-color 0.3s ease,
transform 0.3s var(--sp-ease);
}
.sp-svc-strip__cta i {
font-size: 14px;
transition: transform 0.35s var(--sp-ease);
}
.sp-svc-strip:hover .sp-svc-strip__cta {
background: var(--sp-dark);
border-color: var(--sp-dark);
color: #ffffff;
transform: translateY(-2px);
}
.sp-svc-strip:hover .sp-svc-strip__cta i {
transform: translateX(4px);
}
.sp-svc-list {
display: none !important;
} /* deprecated */
.sp-svc-list--unused {
display: grid;
gap: 0;
border-top: 1px solid var(--sp-border);
}
.sp-svc-item {
position: relative;
display: grid;
grid-template-columns: 90px 260px 1fr 60px;
align-items: start;
gap: 40px;
padding: 34px 20px;
border-bottom: 1px solid var(--sp-border);
color: var(--sp-dark);
text-decoration: none;
transition:
padding 0.5s var(--sp-ease),
background 0.5s ease;
overflow: hidden;
isolation: isolate;
}
.sp-svc-item::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(107, 181, 68, 0.06) 0%,
transparent 65%
);
opacity: 0;
transition: opacity 0.5s ease;
z-index: -1;
}
.sp-svc-item:hover {
padding-left: 32px;
padding-right: 32px;
}
.sp-svc-item:hover::before {
opacity: 1;
}
@media (max-width: 991.98px) {
.sp-svc-item {
grid-template-columns: 60px 1fr 44px;
grid-template-areas:
"num meta arrow"
". body body";
gap: 12px 20px;
padding: 28px 16px;
}
.sp-svc-item__body {
grid-area: body;
}
.sp-svc-item__num {
grid-area: num;
}
.sp-svc-item__meta {
grid-area: meta;
}
.sp-svc-item__arrow {
grid-area: arrow;
}
}
/* Serif italic number */
.sp-svc-item__num {
font-family: var(--sp-serif);
font-style: normal;
font-weight: 400;
font-size: 44px;
color: var(--sp-border-2);
line-height: 1;
letter-spacing: -0.02em;
padding-top: 4px;
transition:
color 0.4s ease,
transform 0.4s var(--sp-ease-out);
}
.sp-svc-item:hover .sp-svc-item__num {
color: var(--sp-green-text);
transform: translateX(4px);
}
/* Icon + service title column */
.sp-svc-item__meta {
display: flex;
flex-direction: column;
gap: 14px;
}
.sp-svc-item__icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--sp-light);
color: var(--sp-dark);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition:
background 0.35s ease,
color 0.35s ease,
transform 0.4s var(--sp-ease-out);
}
.sp-svc-item:hover .sp-svc-item__icon {
background: linear-gradient(180deg, var(--sp-green), var(--sp-green-dark));
color: var(--sp-dark);
transform: rotate(-4deg) scale(1.05);
}
.sp-svc-item__title {
font-size: clamp(24px, 2.2vw, 30px);
line-height: 1.1;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--sp-dark);
margin: 0;
}
/* Body: description + sub-services */
.sp-svc-item__body {
padding-top: 4px;
}
.sp-svc-item__desc {
font-size: 15px;
line-height: 1.6;
color: var(--sp-muted);
margin: 0 0 16px;
max-width: 62ch;
}
.sp-svc-item__sub {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.sp-svc-item__sub span {
display: inline-flex;
align-items: center;
padding: 5px 12px;
background: var(--sp-light);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
color: var(--sp-dark);
letter-spacing: 0.01em;
transition:
background 0.25s ease,
color 0.25s ease;
}
.sp-svc-item:hover .sp-svc-item__sub span {
background: var(--sp-green-soft);
color: var(--sp-green-text);
}
/* Arrow — circular badge, right side */
.sp-svc-item__arrow {
width: 52px;
height: 52px;
border-radius: 50%;
border: 1.5px solid var(--sp-border-2);
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--sp-dark);
font-size: 18px;
justify-self: end;
align-self: center;
transition: all 0.4s var(--sp-ease-out);
}
.sp-svc-item__arrow i {
transition: transform 0.4s var(--sp-ease);
}
.sp-svc-item:hover .sp-svc-item__arrow {
background: var(--sp-green);
border-color: var(--sp-green);
color: var(--sp-dark);
transform: scale(1.08);
}
.sp-svc-item:hover .sp-svc-item__arrow i {
transform: translate(3px, -3px);
}
/* Hide the old (now unused) grid */
.sp-svc-grid[hidden] {
display: none !important;
}
.sp-svc-grid {
align-items: stretch;
}
/* ============================================
SERVICES — Editorial showcase (sidebar + rich panel)
Left rail: numbered index of services with taglines.
Right: hero panel with icon, big title, description,
two-column grid (includes / ideal-for / backed-by),
and a two-CTA footer. Ghost number sits behind.
============================================ */
/* Scroll-pinned zone — 4 services × ~90vh each */
.sp-svc-scroll {
position: relative;
margin-top: 48px;
}
@media (min-width: 992px) {
.sp-svc-scroll {
min-height: calc(4 * 90vh);
}
.sp-svc-scroll .sp-svc-tabs {
position: sticky;
top: 96px;
margin-top: 0;
max-height: calc(100vh - 128px);
}
.sp-svc-scroll .sp-svc-panels {
max-height: calc(100vh - 128px);
overflow: hidden;
}
}
.sp-svc-tabs {
margin-top: 48px;
display: grid;
grid-template-columns: 340px 1fr;
gap: 0;
border: 1px solid var(--sp-border);
border-radius: 24px;
background: #ffffff;
overflow: hidden;
box-shadow: 0 30px 60px -40px rgba(11, 17, 16, 0.14);
}
@media (max-width: 991.98px) {
.sp-svc-tabs { grid-template-columns: 1fr; }
}
/* ---- Sidebar (left rail) ---- */
.sp-svc-tabs__nav {
display: flex;
flex-direction: column;
padding: 20px;
background: var(--sp-cream);
border-right: 1px solid var(--sp-border);
gap: 6px;
}
@media (max-width: 991.98px) {
.sp-svc-tabs__nav {
flex-direction: row;
overflow-x: auto;
scrollbar-width: none;
border-right: 0;
border-bottom: 1px solid var(--sp-border);
padding: 14px;
}
.sp-svc-tabs__nav::-webkit-scrollbar { display: none; }
}
.sp-svc-tab {
position: relative;
display: grid;
grid-template-columns: 44px 1fr 20px;
align-items: center;
gap: 16px;
padding: 20px 22px;
background: transparent;
border: 1px solid transparent;
border-radius: 14px;
text-align: left;
cursor: pointer;
color: var(--sp-muted);
transition:
background 0.3s ease,
border-color 0.3s ease,
color 0.3s ease,
transform 0.3s var(--sp-ease);
}
.sp-svc-tab:hover {
color: var(--sp-dark);
background: rgba(255, 255, 255, 0.7);
}
.sp-svc-tab.is-active {
background: #ffffff;
border-color: var(--sp-border);
color: var(--sp-dark);
box-shadow: 0 8px 20px -14px rgba(11, 17, 16, 0.18);
}
.sp-svc-tab.is-active::before {
content: "";
position: absolute;
left: 0;
top: 18px;
bottom: 18px;
width: 3px;
border-radius: 3px;
background: var(--sp-green);
}
@media (max-width: 991.98px) {
.sp-svc-tab {
flex-shrink: 0;
grid-template-columns: 36px auto;
padding: 14px 18px;
gap: 12px;
min-width: 220px;
}
.sp-svc-tab__arrow { display: none; }
.sp-svc-tab.is-active::before {
left: 14px;
right: 14px;
top: auto;
bottom: 0;
height: 3px;
width: auto;
border-radius: 3px 3px 0 0;
}
}
.sp-svc-tab__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: #ffffff;
border: 1px solid var(--sp-border);
font-family: var(--sp-serif);
font-size: 15px;
font-weight: 700;
color: var(--sp-muted-2);
letter-spacing: 0.05em;
line-height: 1;
transition:
background 0.3s ease,
border-color 0.3s ease,
color 0.3s ease;
}
.sp-svc-tab.is-active .sp-svc-tab__num {
background: var(--sp-dark);
border-color: var(--sp-dark);
color: #ffffff;
}
@media (max-width: 991.98px) {
.sp-svc-tab__num { width: 36px; height: 36px; font-size: 13px; }
}
.sp-svc-tab__text {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.sp-svc-tab__text strong {
display: block;
font-weight: 700;
font-size: 15px;
line-height: 1.2;
color: inherit;
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sp-svc-tab__text em {
display: block;
font-style: normal;
font-size: 12px;
color: var(--sp-muted);
line-height: 1.35;
}
@media (max-width: 991.98px) {
.sp-svc-tab__text em { display: none; }
}
.sp-svc-tab__arrow {
font-size: 14px;
color: var(--sp-muted-2);
opacity: 0;
transform: translateX(-6px);
transition:
opacity 0.3s ease,
transform 0.3s var(--sp-ease),
color 0.3s ease;
}
.sp-svc-tab.is-active .sp-svc-tab__arrow {
opacity: 1;
transform: translateX(0);
color: var(--sp-green-text);
}
/* ---- Panels ---- */
.sp-svc-panels {
position: relative;
}
.sp-svc-panel {
display: none;
position: relative;
padding: 64px 72px;
overflow: hidden;
}
@media (max-width: 991.98px) { .sp-svc-panel { padding: 48px 40px; } }
@media (max-width: 575.98px) { .sp-svc-panel { padding: 36px 24px; } }
.sp-svc-panel.is-active {
display: block;
animation: sp-svc-panel-in 0.45s var(--sp-ease-out);
}
@keyframes sp-svc-panel-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Massive ghost number, background art */
.sp-svc-panel__ghost {
position: absolute;
top: -40px;
right: -20px;
font-family: var(--sp-serif);
font-weight: 700;
font-size: clamp(200px, 22vw, 360px);
line-height: 0.85;
letter-spacing: -0.06em;
color: rgba(11, 17, 16, 0.035);
pointer-events: none;
user-select: none;
z-index: 0;
}
.sp-svc-panel__head {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 28px;
}
.sp-svc-panel__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 14px;
background: var(--sp-green-soft);
color: var(--sp-green-text);
font-size: 24px;
flex-shrink: 0;
}
.sp-svc-panel__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sp-green-text);
}
.sp-svc-panel__eyebrow span {
display: inline-block;
width: 28px;
height: 2px;
background: linear-gradient(90deg, var(--sp-green), transparent);
border-radius: 2px;
}
.sp-svc-panel__title {
position: relative;
z-index: 1;
font-size: clamp(32px, 3.4vw, 46px);
line-height: 1.05;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--sp-dark);
margin: 0 0 16px;
max-width: 20ch;
}
.sp-svc-panel__desc {
position: relative;
z-index: 1;
font-size: 17px;
line-height: 1.65;
color: var(--sp-muted);
margin: 0 0 40px;
max-width: 60ch;
}
/* Two-column grid — includes / ideal for + backed by */
.sp-svc-panel__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 40px 60px;
padding: 32px 0;
border-top: 1px solid var(--sp-border);
border-bottom: 1px solid var(--sp-border);
margin-bottom: 32px;
}
@media (max-width: 767.98px) {
.sp-svc-panel__grid {
grid-template-columns: 1fr;
gap: 28px;
}
}
.sp-svc-panel__col {
display: flex;
flex-direction: column;
}
.sp-svc-panel__label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sp-muted-2);
margin: 0 0 14px;
}
.sp-svc-panel__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 24px;
}
@media (max-width: 575.98px) {
.sp-svc-panel__list { grid-template-columns: 1fr; }
}
.sp-svc-panel__list li {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 500;
color: var(--sp-text);
line-height: 1.35;
}
.sp-svc-panel__list li::before {
content: "";
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--sp-green-soft);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 11px 11px;
flex-shrink: 0;
}
.sp-svc-panel__tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sp-svc-panel__tags span {
display: inline-flex;
align-items: center;
padding: 6px 14px;
background: var(--sp-cream);
border: 1px solid var(--sp-border);
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
color: var(--sp-dark);
letter-spacing: 0.005em;
}
.sp-svc-panel__specs {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.sp-svc-panel__specs li {
display: flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
font-weight: 500;
color: var(--sp-text-2);
}
.sp-svc-panel__specs i {
color: var(--sp-green-text);
font-size: 15px;
flex-shrink: 0;
}
/* Footer — primary CTA + secondary link */
.sp-svc-panel__foot {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.sp-svc-panel__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
background: var(--sp-dark);
color: #ffffff;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
transition:
background 0.3s ease,
transform 0.3s var(--sp-ease);
}
.sp-svc-panel__cta i { transition: transform 0.3s var(--sp-ease); }
.sp-svc-panel__cta:hover {
background: var(--sp-green-dark);
transform: translateY(-2px);
}
.sp-svc-panel__cta:hover i { transform: translateX(4px); }
.sp-svc-panel__link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
font-weight: 600;
color: var(--sp-dark);
text-decoration: none;
transition: color 0.3s ease;
}
.sp-svc-panel__link i { color: var(--sp-green-text); }
.sp-svc-panel__link:hover { color: var(--sp-green-text); }
/* Hide the legacy grid completely */
.sp-svc-grid[hidden] { display: none !important; }
/* Minimal service card — no imagery, typography-led.
Icon → number, title, short description, feature list, text CTA.
Designed to feel calm, scannable, editorial. */
.sp-svc {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
padding: 40px 36px 32px;
background: #ffffff;
color: var(--sp-dark);
text-decoration: none;
border: 1px solid var(--sp-border);
border-radius: 16px;
transition:
border-color 0.35s ease,
box-shadow 0.35s ease,
transform 0.35s var(--sp-ease-out);
}
.sp-svc:hover {
border-color: rgba(107, 181, 68, 0.4);
box-shadow: 0 20px 40px -24px rgba(11, 17, 16, 0.18);
transform: translateY(-2px);
}
@media (max-width: 575.98px) {
.sp-svc {
padding: 32px 26px 26px;
}
}
/* Hide the legacy image + scrim blocks — this card is image-free */
.sp-svc__bg,
.sp-svc__scrim {
display: none;
}
/* Header row — icon on the left, number on the right */
.sp-svc__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--sp-green-soft);
color: var(--sp-green-text);
font-size: 22px;
margin-bottom: 32px;
transition:
background 0.3s ease,
color 0.3s ease;
}
.sp-svc:hover .sp-svc__icon {
background: var(--sp-green);
color: #ffffff;
}
.sp-svc__num {
position: absolute;
top: 40px;
right: 36px;
font-family: var(--sp-serif);
font-weight: 500;
font-size: 13px;
color: var(--sp-muted-2);
letter-spacing: 0.14em;
line-height: 1;
}
@media (max-width: 575.98px) {
.sp-svc__num {
top: 32px;
right: 26px;
}
}
.sp-svc__content {
display: flex;
flex-direction: column;
flex: 1;
}
.sp-svc__title {
font-size: 24px;
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--sp-dark);
margin: 0 0 12px;
}
.sp-svc__desc {
font-size: 15px;
line-height: 1.6;
color: var(--sp-muted);
margin: 0 0 24px;
}
/* Feature list — single column, minimal dot bullet */
.sp-svc__sub {
list-style: none;
padding: 0;
margin: 0 0 32px;
display: flex;
flex-direction: column;
gap: 10px;
}
.sp-svc__sub li {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
font-weight: 500;
color: var(--sp-text);
line-height: 1.4;
}
.sp-svc__sub li::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--sp-green);
flex-shrink: 0;
}
/* CTA — quiet text link with an arrow that slides on hover */
.sp-svc__cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 20px;
border-top: 1px solid var(--sp-border);
font-size: 14px;
font-weight: 600;
color: var(--sp-dark);
transition: color 0.3s ease;
}
.sp-svc__cta i {
font-size: 14px;
transition: transform 0.3s var(--sp-ease);
}
.sp-svc:hover .sp-svc__cta {
color: var(--sp-green-text);
}
.sp-svc:hover .sp-svc__cta i {
transform: translateX(4px);
}
/* ============================================
ASSESSMENT
============================================ */
.sp-assess {
background: var(--sp-light);
position: relative;
overflow: hidden;
}
.sp-assess::before {
content: "";
position: absolute;
top: -200px;
right: -200px;
width: 600px;
height: 600px;
background: radial-gradient(
circle,
rgba(123, 203, 85, 0.15),
transparent 65%
);
border-radius: 50%;
pointer-events: none;
}
.sp-assess__wrap {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: start;
position: relative;
}
@media (max-width: 991.98px) {
.sp-assess__wrap {
grid-template-columns: 1fr;
gap: 48px;
}
}
.sp-assess__left .sp-label {
margin-bottom: 20px;
}
.sp-assess__left h2 {
margin-bottom: 18px;
}
.sp-assess__intro {
color: var(--sp-muted);
font-size: 16px;
line-height: 1.6;
margin: 0 0 32px;
max-width: 46ch;
}
/* Live energy dashboard visual */
.sp-assess__viz {
position: relative;
padding: 28px 28px 26px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
box-shadow: 0 20px 50px -30px rgba(11, 17, 16, 0.18);
overflow: hidden;
}
.sp-assess__viz::before {
content: "";
position: absolute;
top: -80px;
right: -80px;
width: 260px;
height: 260px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(107, 181, 68, 0.18),
transparent 65%
);
pointer-events: none;
}
.sp-assess__viz-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.sp-assess__viz-status {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sp-muted);
}
.sp-assess__viz-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--sp-green);
box-shadow: 0 0 0 4px rgba(107, 181, 68, 0.22);
animation: sp-pulse 1.8s infinite;
}
.sp-assess__viz-badge {
padding: 3px 10px;
background: var(--sp-green-soft);
color: var(--sp-green-text);
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* Circular gauge */
.sp-assess__gauge {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto 24px;
}
.sp-assess__gauge-svg {
width: 100%;
height: 100%;
display: block;
}
.sp-assess__gauge-fill {
stroke-dasharray: 515;
stroke-dashoffset: 515;
animation: sp-gauge-fill 2.4s var(--sp-ease-out) 0.4s forwards;
}
@keyframes sp-gauge-fill {
from {
stroke-dashoffset: 515;
}
to {
stroke-dashoffset: 93;
} /* 82% of circumference filled */
}
.sp-assess__gauge-value {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.sp-assess__gauge-value strong {
display: block;
font-size: 46px;
font-weight: 700;
line-height: 1;
color: var(--sp-dark);
letter-spacing: -0.03em;
}
.sp-assess__gauge-value strong em {
font-family: var(--sp-serif);
font-style: normal;
font-weight: 400;
color: var(--sp-green-text);
font-size: 26px;
margin-left: 2px;
}
.sp-assess__gauge-value span {
display: block;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sp-muted);
font-weight: 600;
margin-top: 6px;
}
/* Bars — animated fill */
.sp-assess__bars {
list-style: none;
padding: 0;
margin: 0 0 20px;
display: grid;
gap: 12px;
}
.sp-assess__bars li {
display: grid;
grid-template-columns: 130px 1fr 60px;
align-items: center;
gap: 12px;
}
.sp-assess__bar-key {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
color: var(--sp-dark);
}
.sp-assess__bar-key i {
color: var(--sp-green-text);
font-size: 13px;
}
.sp-assess__bar-track {
display: block;
height: 6px;
background: var(--sp-light);
border-radius: 4px;
overflow: hidden;
}
.sp-assess__bar-track > span {
display: block;
height: 100%;
width: var(--v);
background: linear-gradient(
90deg,
var(--sp-green-dark),
var(--sp-green-light)
);
border-radius: 4px;
transform-origin: left;
animation: sp-assess-bar-fill 1.6s var(--sp-ease-out) 0.5s both;
transform: scaleX(0);
}
@keyframes sp-assess-bar-fill {
to {
transform: scaleX(1);
}
}
.sp-assess__bars li em {
font-style: normal;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--sp-green-text);
text-align: right;
}
/* Viz foot */
.sp-assess__viz-foot {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--sp-green-soft);
color: var(--sp-green-text);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
}
.sp-assess__viz-foot i {
font-size: 14px;
}
@media (max-width: 575.98px) {
.sp-assess__viz {
padding: 22px 20px;
}
.sp-assess__gauge {
width: 160px;
height: 160px;
}
.sp-assess__gauge-value strong {
font-size: 36px;
}
.sp-assess__bars li {
grid-template-columns: 100px 1fr 50px;
gap: 8px;
}
.sp-assess__bar-key {
font-size: 11.5px;
}
}
/* Wizard */
.sp-assess__card {
background: var(--sp-white);
border-radius: var(--sp-radius-lg);
padding: 40px;
box-shadow:
0 24px 80px -30px rgba(11, 17, 16, 0.25),
0 8px 24px -12px rgba(11, 17, 16, 0.08);
border: 1px solid var(--sp-border);
position: relative;
overflow: hidden;
}
@media (max-width: 575.98px) {
.sp-assess__card {
padding: 28px 22px;
}
}
.sp-wiz__head {
margin-bottom: 36px;
}
.sp-wiz__progress {
display: flex;
align-items: center;
gap: 16px;
}
.sp-wiz__bar {
flex: 1;
height: 6px;
background: var(--sp-light-2);
border-radius: 999px;
overflow: hidden;
}
.sp-wiz__bar span {
display: block;
height: 100%;
width: var(--p, 25%);
background: linear-gradient(90deg, var(--sp-green-dark), var(--sp-green));
border-radius: 999px;
transition: width 0.5s var(--sp-ease-out);
}
.sp-wiz__step-count {
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sp-muted);
font-weight: 500;
}
.sp-wiz__step-count strong {
color: var(--sp-dark);
font-weight: 700;
}
.sp-wiz__step {
display: none;
animation: sp-fade 0.5s var(--sp-ease-out);
}
.sp-wiz__step.is-active {
display: block;
}
@keyframes sp-fade {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.sp-wiz__step .sp-label {
margin-bottom: 14px;
display: block;
}
.sp-wiz__step h3 {
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0 0 24px;
color: var(--sp-dark);
font-weight: 600;
}
.sp-wiz__options {
display: grid;
gap: 10px;
}
.sp-wiz__options--tiles {
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (max-width: 575.98px) {
.sp-wiz__options--tiles {
grid-template-columns: 1fr;
}
}
.sp-wiz__tile {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 28px 12px;
border: 1.5px solid var(--sp-border);
border-radius: 14px;
cursor: pointer;
transition: all 0.25s ease;
text-align: center;
background: var(--sp-white);
}
.sp-wiz__tile input {
position: absolute;
opacity: 0;
inset: 0;
cursor: pointer;
}
.sp-wiz__tile-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--sp-light);
color: var(--sp-green-text);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
transition: all 0.25s ease;
}
.sp-wiz__tile-label {
font-weight: 600;
font-size: 15px;
color: var(--sp-dark);
}
.sp-wiz__tile:hover {
border-color: var(--sp-dark);
}
.sp-wiz__tile:has(input:checked) {
border-color: var(--sp-dark);
background: var(--sp-dark);
color: #ffffff;
}
.sp-wiz__tile:has(input:checked) .sp-wiz__tile-icon {
background: var(--sp-green);
color: var(--sp-dark);
}
.sp-wiz__tile:has(input:checked) .sp-wiz__tile-label {
color: #ffffff;
}
.sp-wiz__field {
display: flex;
flex-direction: column;
gap: 8px;
}
.sp-wiz__field input {
width: 100%;
height: 62px;
padding: 0 20px;
border: 1.5px solid var(--sp-border);
border-radius: 14px;
background: var(--sp-white);
font-family: inherit;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--sp-dark);
text-transform: uppercase;
transition: border-color 0.25s ease;
}
.sp-wiz__field input:focus {
outline: 0;
border-color: var(--sp-dark);
}
.sp-wiz__hint {
font-size: 13px;
color: var(--sp-muted);
}
.sp-wiz__slider {
padding: 12px 0 4px;
}
.sp-wiz__slider input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
background: transparent;
height: 30px;
cursor: pointer;
}
.sp-wiz__slider input[type="range"]::-webkit-slider-runnable-track {
height: 4px;
background: var(--sp-light-2);
border-radius: 4px;
}
.sp-wiz__slider input[type="range"]::-moz-range-track {
height: 4px;
background: var(--sp-light-2);
border-radius: 4px;
}
.sp-wiz__slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 24px;
height: 24px;
background: var(--sp-dark);
border: 4px solid var(--sp-green);
border-radius: 50%;
margin-top: -10px;
cursor: grab;
transition: transform 0.2s ease;
}
.sp-wiz__slider input[type="range"]::-moz-range-thumb {
width: 24px;
height: 24px;
background: var(--sp-dark);
border: 4px solid var(--sp-green);
border-radius: 50%;
cursor: grab;
}
.sp-wiz__slider input[type="range"]:active::-webkit-slider-thumb {
transform: scale(1.15);
}
.sp-wiz__slider-value {
display: flex;
align-items: baseline;
gap: 8px;
margin: 20px 0 4px;
}
.sp-wiz__slider-value strong {
font-size: 42px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--sp-dark);
line-height: 1;
}
.sp-wiz__slider-value em {
font-style: normal;
color: var(--sp-muted);
font-size: 15px;
}
.sp-wiz__slider-scale {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 11.5px;
color: var(--sp-muted);
letter-spacing: 0.04em;
}
.sp-wiz__pill {
position: relative;
display: inline-block;
}
.sp-wiz__pill input {
position: absolute;
opacity: 0;
inset: 0;
cursor: pointer;
}
.sp-wiz__pill span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border: 1.5px solid var(--sp-border);
border-radius: 999px;
font-weight: 500;
font-size: 14.5px;
color: var(--sp-dark);
cursor: pointer;
transition: all 0.25s ease;
background: var(--sp-white);
}
.sp-wiz__pill:hover span {
border-color: var(--sp-dark);
}
.sp-wiz__pill:has(input:checked) span {
background: var(--sp-dark);
color: #ffffff;
border-color: var(--sp-dark);
}
.sp-wiz__pill:has(input:checked) i {
color: var(--sp-green);
}
.sp-wiz__options:not(.sp-wiz__options--tiles) {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* Wizard foot */
.sp-wiz__foot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 36px;
padding-top: 24px;
border-top: 1px solid var(--sp-border);
}
.sp-wiz__foot.is-hidden {
display: none;
}
/* Result */
.sp-wiz__result h3 em {
font-family: var(--sp-serif);
font-style: normal;
color: var(--sp-green-text);
}
.sp-wiz__results {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin: 8px 0 24px;
}
@media (max-width: 575.98px) {
.sp-wiz__results {
grid-template-columns: 1fr;
}
}
.sp-wiz__result-item {
padding: 20px;
background: var(--sp-light);
border-radius: 12px;
border: 1px solid var(--sp-border);
}
.sp-wiz__result-item .sp-label {
margin-bottom: 8px;
display: block;
}
.sp-wiz__result-item strong {
display: block;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--sp-dark);
margin-bottom: 12px;
font-weight: 700;
}
.sp-wiz__meter {
height: 4px;
background: rgba(11, 17, 16, 0.08);
border-radius: 4px;
overflow: hidden;
}
.sp-wiz__meter span {
display: block;
height: 100%;
width: var(--v, 0);
background: linear-gradient(90deg, var(--sp-green-dark), var(--sp-green));
animation: sp-bar 1.2s var(--sp-ease-out) forwards;
transform-origin: left;
transform: scaleX(0);
}
.sp-wiz__disclaimer {
font-size: 12px;
color: var(--sp-muted);
margin: 0 0 20px;
}
.sp-wiz__result-cta {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* ============================================
WHY CHOOSE SYNERGY — solar-plant hero bg + editorial split
============================================ */
.sp-choose {
position: relative;
color: #ffffff;
overflow: hidden;
isolation: isolate;
background: #0b1110;
}
.sp-choose__bg {
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
background-image: url("../images/solar_plant.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(1.5px) brightness(0.7) saturate(1.1);
transform: scale(1.02);
}
.sp-choose__bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(11, 17, 16, 0.4) 0%,
rgba(11, 17, 16, 0.3) 45%,
rgba(11, 17, 16, 0.55) 100%
);
}
.sp-choose__glow,
.sp-choose__grid {
display: none;
}
/* Label variant on dark */
.sp-label--onDark {
color: rgba(255, 255, 255, 0.75);
}
.sp-label--onDark .sp-dot {
background: var(--sp-green-light);
box-shadow: 0 0 0 3px rgba(123, 203, 85, 0.28);
}
/* ---- Split layout: pitch left, reasons right ---- */
.sp-choose__layout {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 80px;
align-items: start;
}
@media (max-width: 1199.98px) {
.sp-choose__layout {
grid-template-columns: 1fr;
gap: 56px;
}
}
/* ---- LEFT: pitch panel ---- */
.sp-choose__pitch {
position: sticky;
top: 120px;
display: flex;
flex-direction: column;
gap: 28px;
}
@media (max-width: 1199.98px) {
.sp-choose__pitch { position: static; }
}
.sp-choose__title {
font-size: clamp(40px, 4.6vw, 64px);
line-height: 1.02;
font-weight: 700;
letter-spacing: -0.035em;
color: #ffffff;
margin: 8px 0 0;
}
.sp-choose__title em {
font-style: normal;
font-weight: 700;
color: var(--sp-green-light);
}
.sp-choose__lede {
font-size: 17px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.72);
margin: 0;
max-width: 46ch;
}
.sp-choose__stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-left: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
overflow: hidden;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
@media (max-width: 575.98px) {
.sp-choose__stats { grid-template-columns: 1fr; }
}
.sp-choose__stat {
padding: 20px 22px;
border-right: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
gap: 6px;
transition: background 0.3s ease;
}
.sp-choose__stat:hover { background: rgba(107, 181, 68, 0.08); }
.sp-choose__stat-num {
font-family: var(--sp-serif);
font-size: clamp(26px, 2.6vw, 36px);
font-weight: 700;
color: #ffffff;
line-height: 1;
letter-spacing: -0.03em;
}
.sp-choose__stat-num em {
font-style: normal;
font-weight: 400;
color: var(--sp-green-light);
font-size: 0.55em;
margin-left: 3px;
}
.sp-choose__stat-lbl {
font-size: 11.5px;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.02em;
line-height: 1.4;
}
.sp-choose__actions {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
margin-top: 8px;
}
@media (max-width: 575.98px) {
.sp-choose__actions { gap: 16px; }
.sp-choose__actions .sp-btn { width: 100%; }
.sp-choose__phone { width: 100%; justify-content: center; }
}
.sp-choose__phone {
display: inline-flex;
align-items: center;
gap: 12px;
color: #ffffff;
text-decoration: none;
transition: color 0.3s ease;
}
.sp-choose__phone i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(107, 181, 68, 0.14);
border: 1px solid rgba(107, 181, 68, 0.3);
color: var(--sp-green-light);
font-size: 15px;
}
.sp-choose__phone em {
display: block;
font-style: normal;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
line-height: 1.2;
}
.sp-choose__phone strong {
display: block;
font-size: 15px;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.01em;
line-height: 1.2;
margin-top: 2px;
}
.sp-choose__phone:hover strong { color: var(--sp-green-light); }
/* ---- RIGHT: reason rows ---- */
.sp-choose__reasons {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.sp-choose-row {
position: relative;
display: grid;
grid-template-columns: 60px 68px minmax(0, 1fr);
gap: 24px;
padding: 32px 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
align-items: start;
transition: background 0.35s ease;
}
@media (max-width: 767.98px) {
.sp-choose-row {
display: flex;
flex-direction: column;
gap: 14px;
padding: 24px 0;
}
.sp-choose-row__num { font-size: 16px; padding-top: 0; letter-spacing: 0.1em; }
.sp-choose-row__icon { width: 44px; height: 44px; font-size: 18px; border-radius: 12px; }
}
.sp-choose-row::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--sp-green-light);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.4s var(--sp-ease-out);
}
.sp-choose-row:hover { background: rgba(255, 255, 255, 0.02); }
.sp-choose-row:hover::before { transform: scaleY(1); }
@media (max-width: 575.98px) {
.sp-choose-row {
display: flex;
flex-direction: column;
gap: 12px;
padding: 20px 0;
}
.sp-choose-row__icon { width: 40px; height: 40px; font-size: 16px; border-radius: 10px; }
.sp-choose-row__num { font-size: 15px; }
.sp-choose-row__body h3 { font-size: 18px; line-height: 1.25; }
.sp-choose-row__body p { font-size: 14px; line-height: 1.55; }
.sp-choose-row__tag { font-size: 10.5px; }
}
.sp-choose-row__num {
font-family: var(--sp-serif);
font-size: 22px;
font-weight: 500;
color: var(--sp-muted-2);
letter-spacing: 0.02em;
line-height: 1;
padding-top: 6px;
transition: color 0.3s ease;
}
.sp-choose-row:hover .sp-choose-row__num { color: var(--sp-green-light); }
.sp-choose-row__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 14px;
background: rgba(107, 181, 68, 0.12);
border: 1px solid rgba(107, 181, 68, 0.28);
color: var(--sp-green-light);
font-size: 22px;
transition:
background 0.3s ease,
border-color 0.3s ease;
}
.sp-choose-row:hover .sp-choose-row__icon {
background: rgba(107, 181, 68, 0.22);
border-color: rgba(107, 181, 68, 0.45);
}
.sp-choose-row__body h3 {
font-size: 20px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.015em;
color: #ffffff;
margin: 0 0 8px;
}
.sp-choose-row__body p {
font-size: 14.5px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.68);
margin: 0 0 12px;
max-width: 58ch;
}
.sp-choose-row__tag {
display: inline-flex;
align-items: center;
padding: 5px 12px;
background: rgba(107, 181, 68, 0.1);
border: 1px solid rgba(107, 181, 68, 0.22);
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
color: var(--sp-green-light);
letter-spacing: 0.01em;
}
/* ============================================
INTERNAL PAGES — shared page hero + helpers
============================================ */
.sp-page-hero {
position: relative;
padding: 180px 0 80px;
background:
linear-gradient(
180deg,
rgba(11, 17, 16, 0.05) 0%,
rgba(11, 17, 16, 0) 40%,
rgba(250, 250, 246, 0.7) 100%
),
url("../images/breadcum2.png") center / cover no-repeat,
var(--sp-cream);
border-bottom: 1px solid var(--sp-border);
overflow: hidden;
isolation: isolate;
}
.sp-page-hero > .container-xxl {
position: relative;
z-index: 1;
}
@media (max-width: 767.98px) { .sp-page-hero { padding: 140px 0 56px; } }
.sp-page-hero__title {
font-size: clamp(40px, 5vw, 72px);
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.035em;
color: var(--sp-dark);
margin: 24px 0 20px;
}
.sp-page-hero__title em {
font-style: normal;
color: var(--sp-green-text);
font-weight: 700;
}
.sp-page-hero__lede {
font-size: 17px;
line-height: 1.65;
color: var(--sp-muted);
margin: 0;
max-width: 68ch;
}
.sp-page-hero__meta {
list-style: none;
padding: 24px 0 0;
margin: 24px 0 0;
border-top: 1px solid var(--sp-border);
display: flex;
flex-wrap: wrap;
gap: 12px 28px;
}
.sp-page-hero__meta li {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--sp-text);
}
.sp-page-hero__meta i { color: var(--sp-green-text); font-size: 14px; }
.sp-page-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 32px;
}
.sp-h2--sm { font-size: clamp(28px, 2.6vw, 40px); }
.sp-h2--onDark { color: #ffffff; }
.sp-h2--onDark em { color: var(--sp-green-light); }
.sp-label--onDark { color: rgba(255, 255, 255, 0.75); }
.sp-label--onDark .sp-dot { background: var(--sp-green-light); box-shadow: 0 0 0 3px rgba(123, 203, 85, 0.28); }
/* ============================================
ABOUT PAGE
============================================ */
/* Breadcrumb */
.sp-breadcrumb {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sp-muted);
margin-bottom: 12px;
}
.sp-breadcrumb a { color: var(--sp-muted); text-decoration: none; transition: color 0.25s ease; }
.sp-breadcrumb a:hover { color: var(--sp-green-text); }
.sp-breadcrumb span[aria-hidden] { color: var(--sp-muted-2); }
.sp-breadcrumb [aria-current] { color: var(--sp-dark); }
/* Numbers band */
.sp-about-numbers {
padding: 40px 0;
background: #ffffff;
border-bottom: 1px solid var(--sp-border);
}
.sp-about-numbers__grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
@media (max-width: 767.98px) { .sp-about-numbers__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
.sp-about-numbers__grid li {
padding-left: 18px;
border-left: 3px solid var(--sp-green);
display: flex;
flex-direction: column;
gap: 6px;
}
.sp-about-numbers__grid strong {
font-family: var(--sp-serif);
font-size: clamp(28px, 3vw, 44px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.03em;
color: var(--sp-dark);
}
.sp-about-numbers__grid strong em {
font-style: normal;
color: var(--sp-green-text);
font-size: 0.55em;
margin-left: 3px;
font-weight: 500;
}
.sp-about-numbers__grid span {
font-size: 12.5px;
color: var(--sp-muted);
letter-spacing: 0.02em;
line-height: 1.4;
}
/* Mission — bold typographic moment */
.sp-about-mission {
background: var(--sp-cream);
padding: 96px 0;
border-bottom: 1px solid var(--sp-border);
}
@media (max-width: 767.98px) { .sp-about-mission { padding: 72px 0; } }
.sp-about-mission__inner {
max-width: 940px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
gap: 28px;
align-items: center;
}
.sp-about-mission__quote {
font-size: clamp(24px, 3vw, 40px);
line-height: 1.28;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--sp-dark);
margin: 0;
}
.sp-about-mission__quote em {
font-style: normal;
color: var(--sp-green-text);
font-weight: 700;
}
.sp-about-mission__by {
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sp-muted-2);
margin: 0;
}
/* Story — 2 col with media */
.sp-about-story__grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 72px;
align-items: start;
}
.sp-about-story__media {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 30px 60px -32px rgba(11, 17, 16, 0.25);
aspect-ratio: 4 / 5;
}
.sp-about-story__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sp-about-story__caption {
position: absolute;
left: 20px;
right: 20px;
bottom: 20px;
padding: 16px 20px;
background: rgba(11, 17, 16, 0.72);
color: #ffffff;
border-radius: 12px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
gap: 4px;
}
.sp-about-story__cap-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sp-green-light);
}
.sp-about-story__caption strong { font-size: 15px; font-weight: 700; }
.sp-about-story__caption em { font-style: normal; font-size: 12.5px; color: rgba(255,255,255,0.7); }
@media (max-width: 991.98px) {
.sp-about-story__grid { grid-template-columns: 1fr; gap: 32px; }
}
.sp-about-story__col .sp-h2 { margin-top: 16px; }
.sp-about-story__col p {
font-size: 16px;
line-height: 1.7;
color: var(--sp-text-2);
margin: 0 0 18px;
}
.sp-about-story__col p:last-child { margin-bottom: 0; }
.sp-about-values__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 991.98px) { .sp-about-values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .sp-about-values__grid { grid-template-columns: 1fr; } }
.sp-about-value {
position: relative;
padding: 32px 26px 28px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 16px;
display: flex;
flex-direction: column;
gap: 12px;
transition: transform 0.35s var(--sp-ease-out), border-color 0.3s ease, box-shadow 0.35s ease;
}
.sp-about-value:hover {
transform: translateY(-4px);
border-color: rgba(107, 181, 68, 0.35);
box-shadow: 0 20px 40px -22px rgba(11, 17, 16, 0.16);
}
.sp-about-value__num {
font-family: var(--sp-serif);
font-size: 13px;
color: var(--sp-muted-2);
letter-spacing: 0.14em;
font-weight: 500;
}
.sp-about-value__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--sp-green-soft);
color: var(--sp-green-text);
font-size: 22px;
margin-bottom: 8px;
}
.sp-about-value h3 {
font-size: 18px;
font-weight: 700;
color: var(--sp-dark);
margin: 0;
line-height: 1.2;
letter-spacing: -0.015em;
}
.sp-about-value p {
font-size: 14px;
line-height: 1.55;
color: var(--sp-muted);
margin: 0;
}
.sp-about-value__tag {
display: inline-flex;
align-self: flex-start;
margin-top: 6px;
padding: 5px 12px;
background: var(--sp-green-soft);
border: 1px solid rgba(107, 181, 68, 0.35);
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sp-green-text);
}
/* Timeline body icon */
.sp-timeline__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--sp-green-soft);
color: var(--sp-green-text);
font-size: 14px;
margin-bottom: 10px;
}
/* Capabilities grid */
.sp-about-caps__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 991.98px) { .sp-about-caps__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .sp-about-caps__grid { grid-template-columns: 1fr; } }
.sp-about-caps__card {
padding: 26px 24px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 8px;
transition: transform 0.35s var(--sp-ease-out), border-color 0.3s ease, box-shadow 0.35s ease;
}
.sp-about-caps__card:hover {
transform: translateY(-3px);
border-color: rgba(107, 181, 68, 0.4);
box-shadow: 0 20px 40px -24px rgba(11, 17, 16, 0.16);
}
.sp-about-caps__card i {
font-size: 22px;
color: var(--sp-green-text);
margin-bottom: 6px;
}
.sp-about-caps__card strong {
font-size: 15px;
font-weight: 700;
color: var(--sp-dark);
letter-spacing: -0.01em;
}
.sp-about-caps__card span {
font-size: 12.5px;
color: var(--sp-muted);
line-height: 1.4;
}
/* Leadership cards */
.sp-about-team__head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: end;
margin-bottom: 56px;
}
@media (max-width: 991.98px) {
.sp-about-team__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
}
.sp-about-team__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 40px;
}
@media (max-width: 991.98px) { .sp-about-team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .sp-about-team__grid { grid-template-columns: 1fr; } }
.sp-about-lead {
padding: 24px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
display: flex;
align-items: center;
gap: 16px;
transition: background 0.3s ease, border-color 0.3s ease, transform 0.35s var(--sp-ease-out);
}
.sp-about-lead:hover {
background: rgba(107, 181, 68, 0.08);
border-color: rgba(107, 181, 68, 0.35);
transform: translateY(-3px);
}
.sp-about-lead__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--c, var(--sp-green));
color: #ffffff;
font-size: 17px;
font-weight: 700;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.sp-about-lead__body { display: flex; flex-direction: column; gap: 3px; }
.sp-about-lead__body strong {
font-size: 15px;
font-weight: 700;
color: #ffffff;
letter-spacing: -0.01em;
}
.sp-about-lead__body span {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sp-green-light);
}
.sp-about-lead__body em {
font-style: normal;
font-size: 12.5px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.4;
margin-top: 2px;
}
/* ============================================
LEADERSHIP (About page) - clean corporate cards on light bg
============================================ */
.sp-leadership { background: #ffffff; }
.sp-leadership__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 991.98px) { .sp-leadership__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .sp-leadership__grid { grid-template-columns: 1fr; } }
.sp-leader {
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.3s ease, box-shadow 0.35s ease, transform 0.35s var(--sp-ease-out);
}
.sp-leader:hover {
border-color: rgba(107, 181, 68, 0.35);
box-shadow: 0 20px 40px -24px rgba(11, 17, 16, 0.14);
transform: translateY(-3px);
}
.sp-leader__portrait {
aspect-ratio: 5 / 4;
background: var(--c, var(--sp-light));
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--sp-border);
}
.sp-leader__portrait span {
font-family: var(--sp-serif);
font-size: 56px;
font-weight: 700;
color: var(--tc, var(--sp-dark));
letter-spacing: -0.02em;
line-height: 1;
}
.sp-leader__body {
padding: 24px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.sp-leader__body h3 {
font-size: 18px;
font-weight: 700;
color: var(--sp-dark);
letter-spacing: -0.01em;
margin: 0;
}
.sp-leader__role {
font-size: 12.5px;
font-weight: 600;
color: var(--sp-green-text);
letter-spacing: 0.02em;
}
.sp-leader__body p {
font-size: 13.5px;
line-height: 1.55;
color: var(--sp-muted);
margin: 4px 0 0;
flex: 1;
}
.sp-leader__links {
list-style: none;
padding: 14px 0 0;
margin: 6px 0 0;
border-top: 1px solid var(--sp-border);
display: flex;
gap: 8px;
}
.sp-leader__links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--sp-cream);
color: var(--sp-dark);
font-size: 15px;
transition: background 0.25s ease, color 0.25s ease;
text-decoration: none;
}
.sp-leader__links a:hover { background: var(--sp-green); color: #ffffff; }
.sp-leadership__foot {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 40px;
justify-content: center;
}
/* ---------- Legacy team block styles (kept for other pages) ---------- */
.sp-team-block { margin-bottom: 48px; }
.sp-team-block__head {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 24px;
}
.sp-team-block__label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sp-green-light);
flex-shrink: 0;
}
.sp-team-block__rule {
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.1);
}
.sp-team-block__count {
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
font-weight: 600;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.sp-team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 991.98px) { .sp-team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .sp-team-grid { grid-template-columns: 1fr; } }
.sp-team-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
overflow: hidden;
transition: background 0.3s ease, border-color 0.3s ease, transform 0.35s var(--sp-ease-out);
display: flex;
flex-direction: column;
}
.sp-team-card:hover {
background: rgba(107, 181, 68, 0.08);
border-color: rgba(107, 181, 68, 0.35);
transform: translateY(-3px);
}
/* Leadership variant: portrait area top */
.sp-team-card--lead .sp-team-card__portrait {
position: relative;
aspect-ratio: 4 / 3;
background: var(--c, var(--sp-green));
background-image:
radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, 0.35), transparent 55%),
radial-gradient(ellipse at 70% 80%, rgba(0, 0, 0, 0.25), transparent 60%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.sp-team-card--lead .sp-team-card__avatar {
font-family: var(--sp-serif);
font-size: 64px;
font-weight: 700;
color: rgba(255, 255, 255, 0.95);
letter-spacing: -0.02em;
line-height: 1;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
}
.sp-team-card__badge {
position: absolute;
top: 14px;
right: 14px;
padding: 5px 12px;
background: rgba(11, 17, 16, 0.72);
color: #ffffff;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
backdrop-filter: blur(6px);
}
.sp-team-card--lead .sp-team-card__body {
padding: 22px 22px 24px;
display: flex;
flex-direction: column;
gap: 6px;
}
.sp-team-card--lead .sp-team-card__body strong {
font-size: 17px;
font-weight: 700;
color: #ffffff;
letter-spacing: -0.01em;
}
.sp-team-card--lead .sp-team-card__body span {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sp-green-light);
}
.sp-team-card--lead .sp-team-card__body p {
font-size: 13px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.7);
margin: 8px 0 0;
}
.sp-team-card__meta {
list-style: none;
padding: 12px 0 0;
margin: 8px 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
gap: 20px;
}
.sp-team-card__meta li {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
}
.sp-team-card__meta i { color: var(--sp-green-light); }
/* Department heads: compact horizontal card */
.sp-team-grid--sm .sp-team-card {
flex-direction: row;
align-items: center;
gap: 14px;
padding: 18px 20px;
}
.sp-team-grid--sm .sp-team-card__portrait {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--c, var(--sp-green));
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sp-team-grid--sm .sp-team-card__avatar {
font-size: 15px;
font-weight: 700;
color: #ffffff;
}
.sp-team-grid--sm .sp-team-card__body { display: flex; flex-direction: column; gap: 3px; }
.sp-team-grid--sm .sp-team-card__body strong {
font-size: 14px;
font-weight: 700;
color: #ffffff;
}
.sp-team-grid--sm .sp-team-card__body span {
font-size: 11.5px;
color: rgba(255, 255, 255, 0.65);
}
/* Departments breakdown */
.sp-team-depts {
padding: 32px 0 40px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 40px;
}
.sp-team-depts .sp-team-block__label { display: block; margin-bottom: 20px; }
.sp-team-depts__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 991.98px) { .sp-team-depts__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .sp-team-depts__grid { grid-template-columns: 1fr; } }
.sp-team-dept {
padding: 20px 22px;
background: rgba(107, 181, 68, 0.06);
border: 1px solid rgba(107, 181, 68, 0.2);
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.sp-team-dept i {
font-size: 22px;
color: var(--sp-green-light);
margin-bottom: 6px;
}
.sp-team-dept strong {
font-size: 15px;
font-weight: 700;
color: #ffffff;
letter-spacing: -0.01em;
}
.sp-team-dept span {
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}
/* Team foot: paired CTAs */
.sp-about-team__foot {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 32px;
}
/* Zig-zag centred timeline: axis down the middle, items alternate L/R */
.sp-timeline {
list-style: none;
padding: 0;
margin: 0 auto;
position: relative;
max-width: 1040px;
}
.sp-timeline::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
background: linear-gradient(180deg, transparent 0, var(--sp-border) 6%, var(--sp-border) 94%, transparent 100%);
}
.sp-timeline__item {
position: relative;
width: 50%;
padding: 0 56px 56px 0;
box-sizing: border-box;
}
.sp-timeline__item:last-child { padding-bottom: 0; }
/* Even items sit on the right of the axis */
.sp-timeline__item:nth-child(even) {
margin-left: 50%;
padding: 0 0 56px 56px;
text-align: left;
}
.sp-timeline__item:nth-child(odd) {
text-align: right;
}
/* Dot on the axis */
.sp-timeline__item::before {
content: "";
position: absolute;
top: 6px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #ffffff;
border: 3px solid var(--sp-green);
box-shadow: 0 0 0 4px var(--sp-cream);
z-index: 1;
}
.sp-timeline__item:nth-child(odd)::before { right: -9px; }
.sp-timeline__item:nth-child(even)::before { left: -9px; }
.sp-timeline__item.is-current::before {
background: var(--sp-green);
box-shadow: 0 0 0 4px var(--sp-cream), 0 0 0 8px rgba(107, 181, 68, 0.25);
}
/* Short connector line from axis to card */
.sp-timeline__item::after {
content: "";
position: absolute;
top: 13px;
width: 40px;
height: 2px;
background: var(--sp-border);
}
.sp-timeline__item:nth-child(odd)::after { right: 8px; }
.sp-timeline__item:nth-child(even)::after { left: 8px; }
/* Year label */
.sp-timeline__year {
display: inline-block;
font-family: var(--sp-serif);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--sp-green-text);
margin-bottom: 8px;
}
/* Body card */
.sp-timeline__body {
padding: 20px 22px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 14px;
display: inline-block;
text-align: left;
max-width: 100%;
transition: border-color 0.3s ease, box-shadow 0.35s ease, transform 0.35s var(--sp-ease-out);
}
.sp-timeline__item:hover .sp-timeline__body {
border-color: rgba(107, 181, 68, 0.35);
box-shadow: 0 14px 28px -18px rgba(11, 17, 16, 0.14);
transform: translateY(-2px);
}
.sp-timeline__body h3 {
font-size: 18px;
font-weight: 700;
color: var(--sp-dark);
margin: 0 0 6px;
letter-spacing: -0.015em;
}
.sp-timeline__body p {
font-size: 14px;
line-height: 1.55;
color: var(--sp-muted);
margin: 0;
}
/* Mobile: collapse to single left-aligned rail */
@media (max-width: 767.98px) {
.sp-timeline { max-width: 100%; }
.sp-timeline::before { left: 8px; transform: none; }
.sp-timeline__item,
.sp-timeline__item:nth-child(odd),
.sp-timeline__item:nth-child(even) {
width: 100%;
margin-left: 0;
padding: 0 0 32px 40px;
text-align: left;
}
.sp-timeline__item:nth-child(odd)::before,
.sp-timeline__item:nth-child(even)::before { left: 0; right: auto; }
.sp-timeline__item:nth-child(odd)::after,
.sp-timeline__item:nth-child(even)::after { left: 16px; right: auto; width: 24px; }
}
.sp-about-team__split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
}
@media (max-width: 991.98px) { .sp-about-team__split { grid-template-columns: 1fr; gap: 40px; } }
.sp-about-team__lede {
font-size: 16px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.72);
margin: 20px 0 28px;
}
.sp-about-team__stats {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
overflow: hidden;
background: rgba(255, 255, 255, 0.03);
}
.sp-about-team__stats > div {
padding: 24px 22px;
border-right: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
gap: 6px;
}
.sp-about-team__stats strong {
font-family: var(--sp-serif);
font-size: clamp(30px, 3vw, 42px);
font-weight: 700;
color: #ffffff;
line-height: 1;
letter-spacing: -0.03em;
}
.sp-about-team__stats strong em {
font-style: normal;
color: var(--sp-green-light);
font-size: 0.55em;
margin-left: 3px;
font-weight: 500;
}
.sp-about-team__stats span {
font-size: 11.5px;
color: rgba(255, 255, 255, 0.6);
letter-spacing: 0.02em;
}
/* ============================================
CONTACT PAGE
============================================ */
.sp-contact-main__grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 48px;
align-items: start;
}
@media (max-width: 991.98px) { .sp-contact-main__grid { grid-template-columns: 1fr; gap: 32px; } }
.sp-contact-form {
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 20px;
padding: 40px;
display: flex;
flex-direction: column;
gap: 16px;
box-shadow: 0 20px 40px -24px rgba(11, 17, 16, 0.14);
}
@media (max-width: 575.98px) { .sp-contact-form { padding: 28px 22px; } }
.sp-contact-form .sp-h2 { margin: 6px 0 4px; }
.sp-contact-form__lede {
font-size: 14.5px;
color: var(--sp-muted);
margin: 0 0 12px;
}
.sp-contact-form__row { display: flex; flex-direction: column; gap: 6px; }
.sp-contact-form__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 575.98px) { .sp-contact-form__row--2 { grid-template-columns: 1fr; } }
.sp-contact-form__field { display: flex; flex-direction: column; gap: 6px; }
.sp-contact-form__field > span {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--sp-text);
}
.sp-contact-form__field input,
.sp-contact-form__field select,
.sp-contact-form__field textarea {
width: 100%;
padding: 12px 14px;
background: var(--sp-cream);
border: 1px solid var(--sp-border);
border-radius: 10px;
font: inherit;
font-size: 14.5px;
color: var(--sp-dark);
transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
font-family: inherit;
}
.sp-contact-form__field textarea { resize: vertical; min-height: 100px; }
.sp-contact-form__field input:focus,
.sp-contact-form__field select:focus,
.sp-contact-form__field textarea:focus {
outline: none;
background: #ffffff;
border-color: var(--sp-green);
box-shadow: 0 0 0 3px rgba(107, 181, 68, 0.18);
}
.sp-contact-form__submit { align-self: flex-start; margin-top: 8px; }
.sp-contact-form__note {
font-size: 12px;
color: var(--sp-muted);
display: inline-flex;
align-items: center;
gap: 8px;
margin: 6px 0 0;
}
.sp-contact-form__note i { color: var(--sp-green-text); }
.sp-contact-side { display: flex; flex-direction: column; gap: 14px; }
.sp-contact-side__card {
padding: 22px 24px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 16px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color 0.3s ease, transform 0.35s var(--sp-ease-out), box-shadow 0.35s ease;
}
.sp-contact-side__card:hover {
border-color: rgba(107, 181, 68, 0.35);
transform: translateY(-2px);
box-shadow: 0 20px 40px -24px rgba(11, 17, 16, 0.14);
}
.sp-contact-side__cardLabel {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sp-green-text);
}
.sp-contact-side__cardCta {
display: flex;
align-items: center;
gap: 14px;
color: var(--sp-dark);
text-decoration: none;
}
.sp-contact-side__cardIcon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--sp-green-soft);
color: var(--sp-green-text);
font-size: 18px;
flex-shrink: 0;
}
.sp-contact-side__cardCta strong {
display: block;
font-size: 15px;
font-weight: 700;
color: var(--sp-dark);
line-height: 1.2;
}
.sp-contact-side__cardCta em {
display: block;
font-style: normal;
font-size: 12px;
color: var(--sp-muted);
margin-top: 2px;
}
.sp-contact-side__proof {
list-style: none;
padding: 20px 24px;
margin: 4px 0 0;
background: var(--sp-cream);
border: 1px solid var(--sp-border);
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.sp-contact-side__proof li {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 600;
color: var(--sp-text);
}
.sp-contact-side__proof i { color: var(--sp-green-text); font-size: 15px; }
.sp-contact-offices__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 991.98px) { .sp-contact-offices__grid { grid-template-columns: 1fr; } }
.sp-contact-office {
position: relative;
padding: 32px 28px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 18px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color 0.3s ease, transform 0.35s var(--sp-ease-out), box-shadow 0.4s ease;
}
.sp-contact-office:hover {
transform: translateY(-4px);
border-color: rgba(107, 181, 68, 0.35);
box-shadow: 0 24px 48px -26px rgba(11, 17, 16, 0.2);
}
.sp-contact-office__pin {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--sp-green-soft);
color: var(--sp-green-text);
font-size: 18px;
margin-bottom: 6px;
}
.sp-contact-office__region {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sp-green-text);
}
.sp-contact-office__city {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--sp-dark);
margin: 4px 0 8px;
}
.sp-contact-office__addr {
font-size: 14px;
line-height: 1.5;
color: var(--sp-muted);
margin: 0 0 14px;
}
.sp-contact-office__actions {
display: flex;
flex-wrap: wrap;
gap: 6px 20px;
padding-top: 14px;
border-top: 1px solid var(--sp-border);
margin-top: auto;
}
.sp-contact-office__actions a {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--sp-dark);
text-decoration: none;
transition: color 0.25s ease;
}
.sp-contact-office__actions a:hover { color: var(--sp-green-text); }
.sp-contact-office__actions i { color: var(--sp-green-text); }
/* ============================================
OUR STORY PAGE
============================================ */
.sp-story-body__grid {
display: grid;
grid-template-columns: 200px 1fr;
gap: 80px;
align-items: start;
}
@media (max-width: 991.98px) {
.sp-story-body__grid { grid-template-columns: 1fr; gap: 32px; }
}
.sp-story-body__nav {
position: sticky;
top: 120px;
}
@media (max-width: 991.98px) { .sp-story-body__nav { position: static; } }
.sp-story-body__nav ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
border-left: 2px solid var(--sp-border);
padding-left: 18px;
}
.sp-story-body__nav a {
display: block;
padding: 6px 0;
font-size: 13px;
font-weight: 600;
color: var(--sp-muted);
letter-spacing: 0.02em;
text-decoration: none;
transition: color 0.25s ease;
}
.sp-story-body__nav a:hover { color: var(--sp-green-text); }
.sp-story-body__prose h2 {
font-size: clamp(24px, 2.4vw, 32px);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--sp-dark);
margin: 40px 0 16px;
scroll-margin-top: 120px;
}
.sp-story-body__prose h2:first-child { margin-top: 0; }
.sp-story-body__prose p {
font-size: 16px;
line-height: 1.75;
color: var(--sp-text-2);
margin: 0 0 20px;
}
/* ============================================
TESTIMONIALS PAGE
Three distinct sections:
1. Video wall (dark, cinematic)
2. Editorial customer stories (light magazine)
3. Google review wall (cream, dense grid)
============================================ */
/* ---------- 01 · VIDEO WALL (dark) ---------- */
.sp-testi-video {
position: relative;
background: var(--sp-dark);
color: #ffffff;
padding: 128px 0 96px;
overflow: hidden;
isolation: isolate;
}
@media (max-width: 767.98px) { .sp-testi-video { padding: 72px 0; } }
.sp-testi-video__bg {
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(ellipse at 20% 10%, rgba(107, 181, 68, 0.15), transparent 55%),
radial-gradient(ellipse at 85% 90%, rgba(107, 181, 68, 0.10), transparent 55%);
}
.sp-testi-video__glow {
position: absolute;
top: -260px;
right: -160px;
width: 640px;
height: 640px;
border-radius: 50%;
background: radial-gradient(circle, rgba(107, 181, 68, 0.28), transparent 60%);
filter: blur(100px);
mix-blend-mode: screen;
}
.sp-testi-video__head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: end;
margin-bottom: 56px;
}
@media (max-width: 991.98px) {
.sp-testi-video__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
}
.sp-testi-video__lede {
font-size: 16px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.72);
margin: 0;
max-width: 46ch;
}
.sp-testi-video__grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 20px;
}
@media (max-width: 991.98px) {
.sp-testi-video__grid { grid-template-columns: 1fr; }
}
.sp-testi-video__featured,
.sp-testi-video__thumb {
position: relative;
display: block;
overflow: hidden;
border-radius: 20px;
color: #ffffff;
text-decoration: none;
isolation: isolate;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: transform 0.5s var(--sp-ease-out), border-color 0.35s ease, box-shadow 0.4s ease;
}
.sp-testi-video__featured:hover,
.sp-testi-video__thumb:hover {
transform: translateY(-4px);
border-color: rgba(107, 181, 68, 0.5);
box-shadow: 0 30px 60px -30px rgba(107, 181, 68, 0.35);
}
.sp-testi-video__featured {
aspect-ratio: 16 / 11;
}
.sp-testi-video__featured img,
.sp-testi-video__thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.5s var(--sp-ease-out);
}
.sp-testi-video__featured:hover img,
.sp-testi-video__thumb:hover img { transform: scale(1.05); }
.sp-testi-video__featured::after,
.sp-testi-video__thumb::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(11, 17, 16, 0.1) 40%, rgba(11, 17, 16, 0.85) 100%);
z-index: 1;
}
.sp-testi-video__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 84px;
height: 84px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.94);
color: var(--sp-dark);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 32px;
z-index: 2;
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.12), 0 20px 40px -12px rgba(0, 0, 0, 0.5);
transition: transform 0.4s var(--sp-ease-out), background 0.3s ease;
}
.sp-testi-video__play--sm {
width: 52px;
height: 52px;
font-size: 22px;
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.1), 0 12px 24px -8px rgba(0, 0, 0, 0.5);
}
.sp-testi-video__featured:hover .sp-testi-video__play,
.sp-testi-video__thumb:hover .sp-testi-video__play {
background: var(--sp-green);
color: #ffffff;
transform: translate(-50%, -50%) scale(1.06);
}
.sp-testi-video__meta {
position: absolute;
left: 24px;
right: 24px;
bottom: 22px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 4px;
}
.sp-testi-video__badge {
display: inline-flex;
align-self: flex-start;
padding: 5px 10px;
background: rgba(107, 181, 68, 0.22);
border: 1px solid rgba(107, 181, 68, 0.45);
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sp-green-light);
margin-bottom: 8px;
}
.sp-testi-video__meta strong {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
}
.sp-testi-video__meta em {
font-style: normal;
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
}
.sp-testi-video__thumbs {
display: grid;
grid-template-rows: repeat(3, 1fr);
gap: 16px;
}
.sp-testi-video__thumb {
position: relative;
min-height: 140px;
}
.sp-testi-video__thumb .sp-testi-video__meta strong { font-size: 15px; }
.sp-testi-video__thumb .sp-testi-video__meta em { font-size: 12px; }
.sp-testi-video__foot {
margin-top: 40px;
display: flex;
justify-content: center;
}
/* ---------- 02 · EDITORIAL CUSTOMER STORIES (light) ---------- */
.sp-testi-stories__list {
display: flex;
flex-direction: column;
gap: 0;
}
.sp-testi-story {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
padding: 56px 0;
border-bottom: 1px solid var(--sp-border);
}
.sp-testi-story:first-child { border-top: 1px solid var(--sp-border); }
.sp-testi-story--reverse { direction: rtl; }
.sp-testi-story--reverse .sp-testi-story__media,
.sp-testi-story--reverse .sp-testi-story__body { direction: ltr; }
@media (max-width: 991.98px) {
.sp-testi-story {
grid-template-columns: 1fr;
gap: 28px;
padding: 40px 0;
direction: ltr !important;
}
}
.sp-testi-story__media {
position: relative;
aspect-ratio: 5 / 4;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 30px 60px -32px rgba(11, 17, 16, 0.28);
}
.sp-testi-story__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.4s var(--sp-ease-out);
}
.sp-testi-story:hover .sp-testi-story__media img { transform: scale(1.04); }
.sp-testi-story__badge {
position: absolute;
top: 20px;
left: 20px;
padding: 8px 14px;
background: rgba(11, 17, 16, 0.72);
color: #fbbc05;
backdrop-filter: blur(6px);
border-radius: 999px;
display: inline-flex;
gap: 3px;
font-size: 13px;
}
.sp-testi-story__body { display: flex; flex-direction: column; gap: 20px; }
.sp-testi-story__meta {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sp-green-text);
}
.sp-testi-story__quote {
font-size: clamp(22px, 2.2vw, 30px);
line-height: 1.35;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--sp-dark);
margin: 0;
position: relative;
padding-left: 20px;
border-left: 3px solid var(--sp-green);
}
.sp-testi-story__by {
display: flex;
align-items: center;
gap: 14px;
padding-top: 20px;
border-top: 1px solid var(--sp-border);
}
.sp-testi-story__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--c, var(--sp-green));
color: #ffffff;
font-size: 15px;
font-weight: 700;
flex-shrink: 0;
}
.sp-testi-story__by strong { display: block; font-size: 15px; font-weight: 700; color: var(--sp-dark); }
.sp-testi-story__by em { display: block; font-style: normal; font-size: 12.5px; color: var(--sp-muted); }
.sp-testi-story__specs {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
}
.sp-testi-story__specs li {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--sp-text-2);
}
.sp-testi-story__specs i { color: var(--sp-green-text); }
/* ---------- 03 · GOOGLE REVIEW WALL (cream, dense) ---------- */
.sp-testi-wall__head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: end;
margin-bottom: 32px;
}
@media (max-width: 991.98px) {
.sp-testi-wall__head { grid-template-columns: 1fr; gap: 24px; }
}
.sp-testi-wall__summary {
display: flex;
align-items: center;
gap: 20px;
padding: 20px 24px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 14px;
justify-self: end;
}
@media (max-width: 991.98px) { .sp-testi-wall__summary { justify-self: start; flex-wrap: wrap; } }
.sp-testi-wall__brand {
font-family: var(--sp-serif);
font-weight: 700;
font-size: 26px;
letter-spacing: -0.01em;
}
.sp-testi-wall__score { display: inline-flex; align-items: center; gap: 8px; }
.sp-testi-wall__score strong {
font-family: var(--sp-serif);
font-size: 28px;
font-weight: 700;
color: var(--sp-dark);
line-height: 1;
}
.sp-testi-wall__stars {
display: inline-flex;
gap: 2px;
font-size: 15px;
color: #fbbc05;
}
.sp-testi-wall__count {
font-size: 12.5px;
color: var(--sp-muted);
letter-spacing: 0.02em;
padding-left: 16px;
border-left: 1px solid var(--sp-border);
}
.sp-testi-wall__filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--sp-border);
}
.sp-testi-wall__chip {
padding: 8px 16px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
color: var(--sp-text);
cursor: pointer;
transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.sp-testi-wall__chip:hover { border-color: rgba(107, 181, 68, 0.4); color: var(--sp-green-text); }
.sp-testi-wall__chip.is-active {
background: var(--sp-dark);
border-color: var(--sp-dark);
color: #ffffff;
}
.sp-testi-wall__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 991.98px) { .sp-testi-wall__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .sp-testi-wall__grid { grid-template-columns: 1fr; } }
.sp-review {
padding: 22px 22px 20px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 12px;
transition: transform 0.35s var(--sp-ease-out), border-color 0.3s ease, box-shadow 0.35s ease;
}
.sp-review:hover {
transform: translateY(-3px);
border-color: rgba(107, 181, 68, 0.35);
box-shadow: 0 20px 40px -24px rgba(11, 17, 16, 0.14);
}
.sp-review header { display: flex; align-items: center; gap: 12px; }
.sp-review__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--c, var(--sp-green));
color: #ffffff;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
}
.sp-review__who { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sp-review__who strong { font-size: 13.5px; font-weight: 700; color: var(--sp-dark); }
.sp-review__who em { font-style: normal; font-size: 11.5px; color: var(--sp-muted); }
.sp-review__brand {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--sp-light);
color: var(--sp-dark);
font-family: var(--sp-serif);
font-weight: 700;
font-size: 13px;
}
.sp-review__stars {
display: inline-flex;
gap: 2px;
font-size: 13px;
color: #fbbc05;
}
.sp-review p {
font-size: 13.5px;
line-height: 1.55;
color: var(--sp-text-2);
margin: 0;
}
.sp-review footer {
padding-top: 10px;
border-top: 1px solid var(--sp-border);
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11.5px;
font-weight: 600;
color: var(--sp-green-text);
}
.sp-testi-wall__foot {
margin-top: 40px;
display: flex;
justify-content: center;
}
/* ============================================
DOWNLOADS PAGE
============================================ */
.sp-dl__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 991.98px) { .sp-dl__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .sp-dl__grid { grid-template-columns: 1fr; } }
.sp-dl-card {
display: grid;
grid-template-columns: 56px 1fr 44px;
gap: 18px;
align-items: start;
padding: 24px 22px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 16px;
color: var(--sp-dark);
text-decoration: none;
transition: transform 0.35s var(--sp-ease-out), border-color 0.3s ease, box-shadow 0.35s ease;
}
.sp-dl-card:hover {
transform: translateY(-3px);
border-color: rgba(107, 181, 68, 0.4);
box-shadow: 0 20px 40px -24px rgba(11, 17, 16, 0.16);
}
.sp-dl-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 12px;
background: var(--sp-green-soft);
color: var(--sp-green-text);
font-size: 22px;
}
.sp-dl-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-dl-card__body h3 {
font-size: 16px;
font-weight: 700;
color: var(--sp-dark);
margin: 0;
letter-spacing: -0.01em;
}
.sp-dl-card__body p {
font-size: 13.5px;
color: var(--sp-muted);
line-height: 1.5;
margin: 0;
}
.sp-dl-card__meta {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--sp-green-text);
margin-top: 6px;
}
.sp-dl-card__cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--sp-light);
color: var(--sp-dark);
font-size: 18px;
align-self: center;
transition: background 0.3s ease, color 0.3s ease, transform 0.3s var(--sp-ease);
}
.sp-dl-card:hover .sp-dl-card__cta {
background: var(--sp-green);
color: #ffffff;
transform: translateY(-2px);
}
/* ============================================
SOLUTIONS HUB (solutions.php)
============================================ */
.sp-sol-hub__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(360px, auto);
grid-auto-flow: dense;
gap: 20px;
}
@media (max-width: 991.98px) {
.sp-sol-hub__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
.sp-sol-hub__grid { grid-template-columns: 1fr; }
}
.sp-sol-hub__card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 20px;
border: 1px solid var(--sp-border);
background: #ffffff;
color: var(--sp-dark);
text-decoration: none;
isolation: isolate;
transition: transform 0.45s var(--sp-ease-out), border-color 0.35s ease, box-shadow 0.4s ease;
}
.sp-sol-hub__card:hover {
transform: translateY(-4px);
border-color: rgba(107, 181, 68, 0.4);
box-shadow: 0 30px 60px -30px rgba(11, 17, 16, 0.22);
}
.sp-sol-hub__card--wide { grid-column: span 2; }
@media (max-width: 991.98px) { .sp-sol-hub__card--wide { grid-column: span 2; } }
@media (max-width: 575.98px) { .sp-sol-hub__card--wide { grid-column: span 1; } }
.sp-sol-hub__media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--sp-light);
}
.sp-sol-hub__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s var(--sp-ease-out);
}
.sp-sol-hub__card:hover .sp-sol-hub__media img { transform: scale(1.05); }
.sp-sol-hub__body {
padding: 30px 30px 28px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
position: relative;
}
.sp-sol-hub__num {
position: absolute;
top: 26px;
right: 30px;
font-family: var(--sp-serif);
font-weight: 500;
font-size: 14px;
letter-spacing: 0.14em;
color: var(--sp-muted-2);
}
.sp-sol-hub__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--sp-green-soft);
color: var(--sp-green-text);
font-size: 22px;
margin-bottom: 8px;
}
.sp-sol-hub__body h2 {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--sp-dark);
margin: 0;
}
.sp-sol-hub__body p {
font-size: 14.5px;
line-height: 1.6;
color: var(--sp-muted);
margin: 0;
}
.sp-sol-hub__points {
list-style: none;
padding: 0;
margin: 6px 0 0;
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
}
.sp-sol-hub__points li {
font-size: 12px;
font-weight: 600;
color: var(--sp-green-text);
letter-spacing: 0.02em;
}
.sp-sol-hub__points li::before {
content: "\2022";
color: var(--sp-green);
margin-right: 6px;
}
.sp-sol-hub__cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 18px;
border-top: 1px solid var(--sp-border);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--sp-dark);
transition: color 0.25s ease, gap 0.3s var(--sp-ease);
}
.sp-sol-hub__card:hover .sp-sol-hub__cta {
color: var(--sp-green-text);
gap: 14px;
}
/* Solutions steps */
.sp-sol-steps {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 991.98px) { .sp-sol-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .sp-sol-steps { grid-template-columns: 1fr; } }
.sp-sol-steps li {
padding: 28px 26px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.sp-sol-steps__num {
font-family: var(--sp-serif);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.14em;
color: var(--sp-muted-2);
margin-bottom: 8px;
}
.sp-sol-steps li strong {
font-size: 17px;
font-weight: 700;
color: var(--sp-dark);
letter-spacing: -0.01em;
}
.sp-sol-steps li p {
font-size: 13.5px;
line-height: 1.55;
color: var(--sp-muted);
margin: 0;
}
/* ============================================
INDIVIDUAL SOLUTION PAGES (Solar / Battery / EV / Roofing)
============================================ */
.sp-sol-hero {
position: relative;
padding: 176px 0 88px;
color: #ffffff;
overflow: hidden;
isolation: isolate;
background: var(--sp-dark);
}
@media (max-width: 991.98px) { .sp-sol-hero { padding: 156px 0 72px; } }
@media (max-width: 767.98px) { .sp-sol-hero { padding: 140px 0 64px; } }
.sp-sol-hero__bg {
position: absolute;
inset: 0;
z-index: -1;
}
.sp-sol-hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.55) saturate(1.05);
}
.sp-sol-hero__scrim {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(11, 17, 16, 0.6) 0%, rgba(11, 17, 16, 0.35) 40%, rgba(11, 17, 16, 0.85) 100%),
linear-gradient(90deg, rgba(11, 17, 16, 0.55) 0%, rgba(11, 17, 16, 0) 60%);
}
.sp-breadcrumb--onDark { color: rgba(255, 255, 255, 0.7); margin-bottom: 20px; }
.sp-breadcrumb--onDark a { color: rgba(255, 255, 255, 0.7); }
.sp-breadcrumb--onDark a:hover { color: var(--sp-green-light); }
.sp-breadcrumb--onDark [aria-current] { color: #ffffff; }
/* Force the hero's container to NOT be the containing block for the breadcrumb —
so the breadcrumb positions relative to the hero itself (not the padded container). */
.sp-sol-hero > .container-xxl.position-relative { position: static !important; }
/* Sit the breadcrumb in a subtle top strip immediately under the fixed header */
.sp-sol-hero .sp-breadcrumb--onDark {
position: absolute;
top: calc(var(--sp-header-h, 92px) + 22px);
left: 0;
right: 0;
margin: 0 auto;
padding: 0 24px;
max-width: var(--sp-container);
z-index: 3;
box-sizing: border-box;
/* Premium micro-typography */
font-size: 11.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
color: rgba(255,255,255,0.55);
display: flex;
gap: 10px;
align-items: center;
}
.sp-sol-hero .sp-breadcrumb--onDark a { color: rgba(255,255,255,0.7); font-weight: 600; }
.sp-sol-hero .sp-breadcrumb--onDark a:hover { color: var(--sp-green-light); }
.sp-sol-hero .sp-breadcrumb--onDark [aria-current] { color: #ffffff; }
.sp-sol-hero .sp-breadcrumb--onDark span[aria-hidden] {
color: rgba(255,255,255,0.28);
font-size: 10px;
}
@media (max-width: 1199.98px) {
.sp-sol-hero .sp-breadcrumb--onDark { padding: 0 20px; }
}
@media (max-width: 575.98px) {
.sp-sol-hero .sp-breadcrumb--onDark {
padding: 0 18px;
top: calc(var(--sp-header-h, 92px) + 12px);
font-size: 10.5px;
letter-spacing: 0.14em;
}
}
.sp-sol-hero__grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 64px;
align-items: end;
padding-top: 0;
}
@media (max-width: 991.98px) { .sp-sol-hero__grid { grid-template-columns: 1fr; gap: 40px; } }
.sp-sol-hero__title {
font-size: clamp(40px, 5vw, 68px);
line-height: 1.02;
font-weight: 700;
letter-spacing: -0.035em;
color: #ffffff;
margin: 12px 0 20px;
}
.sp-sol-hero__title em {
font-style: normal;
font-weight: 700;
color: var(--sp-green-light);
}
.sp-sol-hero__lede {
font-size: 17px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.78);
margin: 0 0 32px;
max-width: 56ch;
}
.sp-sol-hero__ctas {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.sp-sol-hero__specs {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
overflow: hidden;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.sp-sol-hero__specs li {
padding: 22px 24px;
border-right: 1px solid rgba(255, 255, 255, 0.12);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
display: flex;
flex-direction: column;
gap: 6px;
}
.sp-sol-hero__specs strong {
font-family: var(--sp-serif);
font-size: clamp(24px, 2.6vw, 32px);
font-weight: 700;
line-height: 1;
color: #ffffff;
letter-spacing: -0.03em;
}
.sp-sol-hero__specs strong em {
font-style: normal;
color: var(--sp-green-light);
font-size: 0.55em;
margin-left: 3px;
font-weight: 500;
}
.sp-sol-hero__specs span {
font-size: 11.5px;
color: rgba(255, 255, 255, 0.65);
letter-spacing: 0.02em;
}
/* Body: overview + spec sheet */
.sp-sol-body__grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 64px;
align-items: start;
}
@media (max-width: 991.98px) { .sp-sol-body__grid { grid-template-columns: 1fr; gap: 40px; } }
.sp-sol-body__grid > div .sp-h2 { margin: 16px 0; }
.sp-sol-body__grid > div p {
font-size: 16px;
line-height: 1.7;
color: var(--sp-text-2);
margin: 0 0 18px;
}
.sp-sol-body__spec {
padding: 32px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 18px;
box-shadow: 0 30px 60px -32px rgba(11, 17, 16, 0.14);
position: sticky;
top: 120px;
}
@media (max-width: 991.98px) { .sp-sol-body__spec { position: static; } }
.sp-sol-body__spec-label {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sp-green-text);
margin-bottom: 18px;
}
.sp-sol-body__spec ul { list-style: none; padding: 0; margin: 0; }
.sp-sol-body__spec li {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--sp-border);
}
.sp-sol-body__spec li:last-child { border-bottom: 0; padding-bottom: 0; }
.sp-sol-body__spec li span {
font-size: 13px;
color: var(--sp-muted);
letter-spacing: 0.02em;
}
.sp-sol-body__spec li strong {
font-size: 13.5px;
font-weight: 700;
color: var(--sp-dark);
text-align: right;
}
/* Included services grid — 2x2 for 4 items (fills the section completely, no orphans) */
.sp-sol-included__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
@media (max-width: 575.98px) { .sp-sol-included__grid { grid-template-columns: 1fr; } }
.sp-sol-included__grid article {
padding: 40px 36px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 18px;
display: flex;
flex-direction: column;
gap: 12px;
transition: transform 0.35s var(--sp-ease-out), border-color 0.3s ease, box-shadow 0.35s ease;
}
.sp-sol-included__grid article:hover {
transform: translateY(-4px);
border-color: rgba(107, 181, 68, 0.5);
box-shadow: 0 24px 50px -30px rgba(11, 17, 16, 0.22);
}
.sp-sol-included__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border-radius: 16px;
background: var(--sp-green-soft);
color: var(--sp-green-text);
font-size: 26px;
margin-bottom: 12px;
}
.sp-sol-included__grid h3 {
font-size: 22px;
font-weight: 700;
color: var(--sp-dark);
letter-spacing: -0.01em;
margin: 0;
line-height: 1.2;
}
.sp-sol-included__grid p {
font-size: 15px;
line-height: 1.6;
color: var(--sp-muted);
margin: 0;
}
/* On 3-col variant (6-item grids), keep proportions a touch tighter */
.sp-sol-included__grid--3 article { padding: 32px 28px; }
.sp-sol-included__grid--3 .sp-sol-included__icon { width: 52px; height: 52px; font-size: 22px; }
.sp-sol-included__grid--3 h3 { font-size: 19px; }
.sp-sol-included__grid--3 p { font-size: 14.5px; }
/* Case study spotlight */
.sp-sol-spotlight__card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 20px;
overflow: hidden;
text-decoration: none;
color: var(--sp-dark);
transition: border-color 0.3s ease, transform 0.35s var(--sp-ease-out), box-shadow 0.4s ease;
}
.sp-sol-spotlight__card:hover {
transform: translateY(-3px);
border-color: rgba(107, 181, 68, 0.4);
box-shadow: 0 30px 60px -30px rgba(11, 17, 16, 0.2);
}
@media (max-width: 991.98px) { .sp-sol-spotlight__card { grid-template-columns: 1fr; } }
.sp-sol-spotlight__media { aspect-ratio: 4 / 3; overflow: hidden; }
.sp-sol-spotlight__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--sp-ease-out); }
.sp-sol-spotlight__card:hover .sp-sol-spotlight__media img { transform: scale(1.04); }
.sp-sol-spotlight__body {
padding: 40px;
display: flex;
flex-direction: column;
gap: 14px;
justify-content: center;
}
@media (max-width: 767.98px) { .sp-sol-spotlight__body { padding: 28px; } }
.sp-sol-spotlight__label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sp-green-text);
}
.sp-sol-spotlight__body h3 {
font-size: clamp(22px, 2.4vw, 32px);
font-weight: 700;
color: var(--sp-dark);
letter-spacing: -0.02em;
margin: 0;
line-height: 1.15;
}
.sp-sol-spotlight__body p {
font-size: 15px;
line-height: 1.6;
color: var(--sp-muted);
margin: 0;
}
/* Related solutions */
.sp-sol-related__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 767.98px) { .sp-sol-related__grid { grid-template-columns: 1fr; } }
.sp-sol-related__card {
display: grid;
grid-template-columns: 48px 1fr auto;
align-items: center;
gap: 16px;
padding: 22px 24px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 14px;
color: var(--sp-dark);
text-decoration: none;
transition: border-color 0.3s ease, transform 0.35s var(--sp-ease-out), box-shadow 0.35s ease;
}
.sp-sol-related__card:hover {
transform: translateY(-3px);
border-color: rgba(107, 181, 68, 0.35);
box-shadow: 0 20px 40px -24px rgba(11, 17, 16, 0.14);
}
.sp-sol-related__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--sp-green-soft);
color: var(--sp-green-text);
font-size: 22px;
}
.sp-sol-related__card strong { font-size: 15px; font-weight: 700; color: var(--sp-dark); line-height: 1; display: block; }
.sp-sol-related__card span { font-size: 12.5px; color: var(--sp-muted); display: block; margin-top: 3px; }
.sp-sol-related__card > i { font-size: 16px; color: var(--sp-muted-2); transition: color 0.25s ease, transform 0.25s ease; }
.sp-sol-related__card:hover > i { color: var(--sp-green-text); transform: translate(3px, -3px); }
/* ============================================
CASE STUDIES PAGE (case-studies.html)
============================================ */
.sp-cs-page-hero {
position: relative;
padding: 180px 0 72px;
background:
linear-gradient(
180deg,
rgba(11, 17, 16, 0.05) 0%,
rgba(11, 17, 16, 0) 40%,
rgba(250, 250, 246, 0.7) 100%
),
url("../images/breadcum2.png") center / cover no-repeat,
var(--sp-cream);
border-bottom: 1px solid var(--sp-border);
overflow: hidden;
isolation: isolate;
}
.sp-cs-page-hero > .container-xxl {
position: relative;
z-index: 1;
}
@media (max-width: 767.98px) {
.sp-cs-page-hero { padding: 140px 0 56px; }
}
.sp-cs-page-hero__title {
font-size: clamp(40px, 5vw, 72px);
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.035em;
color: var(--sp-dark);
margin: 24px 0 20px;
}
.sp-cs-page-hero__title em {
font-style: normal;
color: var(--sp-green-text);
font-weight: 700;
}
.sp-cs-page-hero__lede {
font-size: 17px;
line-height: 1.65;
color: var(--sp-muted);
margin: 0;
max-width: 68ch;
}
.sp-cs-page {
padding: 96px 0;
background: #ffffff;
border-bottom: 1px solid var(--sp-border);
}
.sp-cs-page--alt { background: var(--sp-cream); }
@media (max-width: 767.98px) { .sp-cs-page { padding: 72px 0; } }
/* Featured (UK First) case study — Shell */
.sp-cs-page--feature {
position: relative;
background:
radial-gradient(900px 320px at 0% 0%, rgba(107, 181, 68, 0.08), transparent 60%),
radial-gradient(900px 320px at 100% 100%, rgba(107, 181, 68, 0.05), transparent 60%),
#ffffff;
}
.sp-cs-page--feature::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--sp-green-light), var(--sp-green));
}
.sp-cs-page__eyebrow--flag {
color: #ffffff;
background: linear-gradient(180deg, var(--sp-green-light), var(--sp-green));
padding: 7px 14px 7px 10px;
border-radius: 999px;
box-shadow:
0 10px 22px -12px rgba(11, 17, 16, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.sp-cs-page__eyebrow--flag .sp-cs-page__eyebrow-line {
background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0.3));
}
.sp-cs-page__eyebrow--flag em {
font-style: normal;
font-weight: 800;
letter-spacing: 0.18em;
color: #ffffff;
}
.sp-cs-page__caption {
margin: 14px 0 24px;
text-align: center;
font-size: 12px;
color: var(--sp-muted-2, var(--sp-muted));
}
.sp-cs-page__caption em { font-style: normal; }
.sp-cs-page__head { max-width: 820px; margin-bottom: 40px; }
.sp-cs-page__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sp-green-text);
margin-bottom: 18px;
}
.sp-cs-page__eyebrow-line {
width: 36px;
height: 1.5px;
background: linear-gradient(90deg, var(--sp-green), transparent);
display: inline-block;
}
.sp-cs-page__title {
font-size: clamp(32px, 3.6vw, 48px);
line-height: 1.05;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--sp-dark);
margin: 0 0 20px;
}
.sp-cs-page__title em {
font-style: normal;
color: var(--sp-green-text);
font-weight: 700;
}
.sp-cs-page__lede {
font-size: 17px;
line-height: 1.65;
color: var(--sp-muted);
margin: 0;
max-width: 64ch;
}
.sp-cs-page__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px 32px;
padding: 28px 0;
margin-bottom: 40px;
border-top: 1px solid var(--sp-border);
border-bottom: 1px solid var(--sp-border);
}
@media (max-width: 991.98px) { .sp-cs-page__stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .sp-cs-page__stats { grid-template-columns: 1fr; } }
.sp-cs-page__stats > div {
display: flex;
flex-direction: column;
gap: 4px;
padding-left: 16px;
border-left: 2px solid var(--sp-green);
}
.sp-cs-page__stats strong {
font-family: var(--sp-serif);
font-size: clamp(24px, 2.4vw, 32px);
font-weight: 700;
color: var(--sp-dark);
line-height: 1;
letter-spacing: -0.02em;
}
.sp-cs-page__stats strong em {
font-style: normal;
color: var(--sp-green-text);
font-size: 0.55em;
margin-left: 2px;
font-weight: 500;
}
.sp-cs-page__stats > div > em {
font-style: normal;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sp-green-text);
font-weight: 700;
margin-top: 2px;
}
.sp-cs-page__stats span {
font-size: 12.5px;
color: var(--sp-muted);
line-height: 1.4;
}
/* Gallery — 12-col bento */
.sp-cs-page__gallery {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 180px;
gap: 14px;
margin-bottom: 40px;
}
@media (max-width: 767.98px) {
.sp-cs-page__gallery { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 140px; gap: 10px; }
}
.sp-cs-page__tile {
position: relative;
overflow: hidden;
border-radius: 14px;
background: var(--sp-light);
display: block;
grid-column: span 4;
grid-row: span 1;
transition: transform 0.4s var(--sp-ease-out), box-shadow 0.4s ease;
}
.sp-cs-page__tile:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px -20px rgba(11, 17, 16, 0.28);
}
.sp-cs-page__tile img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s var(--sp-ease-out);
}
.sp-cs-page__tile:hover img { transform: scale(1.05); }
.sp-cs-page__tile--hero {
grid-column: span 8;
grid-row: span 2;
border-radius: 18px;
}
@media (max-width: 767.98px) {
.sp-cs-page__tile { grid-column: span 3; }
.sp-cs-page__tile--hero { grid-column: span 6; grid-row: span 2; }
}
.sp-cs-page__foot {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
padding-top: 24px;
border-top: 1px solid var(--sp-border);
}
.sp-cs-page__loc {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: var(--sp-dark);
}
.sp-cs-page__loc i { color: var(--sp-green-text); }
/* ============================================
INSTALLATIONS GALLERY — bento of real UK sites
============================================ */
.sp-installs {
background: #ffffff;
}
.sp-installs__head {
align-items: end;
gap: 64px;
}
.sp-installs__head-right {
display: flex;
flex-direction: column;
gap: 28px;
}
.sp-installs__stats {
list-style: none;
padding: 20px 0 0;
margin: 0;
border-top: 1px solid var(--sp-border);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px 28px;
}
.sp-installs__stats li {
display: flex;
flex-direction: column;
gap: 4px;
}
.sp-installs__stats strong {
font-family: var(--sp-serif);
font-size: clamp(24px, 2.2vw, 30px);
font-weight: 700;
color: var(--sp-dark);
line-height: 1;
letter-spacing: -0.02em;
}
.sp-installs__stats strong em {
font-style: normal;
font-weight: 400;
color: var(--sp-green-text);
font-size: 0.7em;
margin-left: 2px;
}
.sp-installs__stats span {
font-size: 11.5px;
color: var(--sp-muted);
letter-spacing: 0.02em;
line-height: 1.4;
}
/* Bento grid — 1 hero + 5 uniform + 1 wide, 12-col grid */
.sp-installs__grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 200px;
gap: 14px;
margin-top: 40px;
}
@media (max-width: 991.98px) {
.sp-installs__grid {
grid-auto-rows: 180px;
gap: 12px;
}
}
@media (max-width: 575.98px) {
.sp-installs__grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 200px;
}
}
.sp-install {
position: relative;
display: block;
overflow: hidden;
border-radius: 16px;
background: var(--sp-light);
text-decoration: none;
color: #ffffff;
isolation: isolate;
grid-column: span 3;
grid-row: span 1;
transition: transform 0.5s var(--sp-ease-out), box-shadow 0.5s ease;
box-shadow: 0 8px 20px -14px rgba(11, 17, 16, 0.18);
}
.sp-install:hover {
transform: translateY(-4px);
box-shadow: 0 24px 40px -20px rgba(11, 17, 16, 0.28);
}
.sp-install img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.6s var(--sp-ease-out);
z-index: 0;
}
.sp-install:hover img {
transform: scale(1.06);
}
/* Hero tile: 6 cols × 2 rows */
.sp-install--hero {
grid-column: span 6;
grid-row: span 2;
border-radius: 20px;
}
/* Wide tile: 6 cols × 1 row */
.sp-install--wide {
grid-column: span 6;
}
@media (max-width: 991.98px) {
.sp-install { grid-column: span 4; }
.sp-install--hero { grid-column: span 8; grid-row: span 2; }
.sp-install--wide { grid-column: span 8; }
}
@media (max-width: 575.98px) {
.sp-install,
.sp-install--hero,
.sp-install--wide {
grid-column: span 2;
grid-row: span 1;
}
.sp-install--hero { grid-row: span 2; }
}
/* Dark gradient overlay for meta legibility */
.sp-install::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(11, 17, 16, 0) 40%,
rgba(11, 17, 16, 0.75) 100%
);
z-index: 1;
transition: opacity 0.4s ease;
opacity: 0.85;
}
.sp-install:hover::after { opacity: 1; }
.sp-install__meta {
position: absolute;
left: 18px;
right: 18px;
bottom: 16px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 4px;
transform: translateY(4px);
opacity: 0.95;
transition:
transform 0.4s var(--sp-ease-out),
opacity 0.4s ease;
}
.sp-install:hover .sp-install__meta {
transform: translateY(0);
opacity: 1;
}
.sp-install__type {
display: inline-flex;
align-self: flex-start;
padding: 4px 10px;
background: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #ffffff;
margin-bottom: 6px;
line-height: 1;
}
.sp-install__loc {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13.5px;
font-weight: 600;
color: #ffffff;
letter-spacing: -0.005em;
}
.sp-install__loc i {
font-size: 12px;
color: var(--sp-green-light);
}
.sp-install__spec {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}
/* Foot row */
.sp-installs__foot {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--sp-border);
flex-wrap: wrap;
}
.sp-installs__foot-note {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
color: var(--sp-muted);
font-weight: 500;
}
.sp-installs__foot-note i {
color: var(--sp-green-text);
font-size: 15px;
}
/* ============================================
PROJECTS — featured hero + curated grid
============================================ */
.sp-projects {
background: var(--sp-cream);
}
/* ---- Featured case study — full-width split hero ---- */
.sp-cs-hero {
display: grid;
grid-template-columns: 1.15fr 1fr;
min-height: 480px;
border-radius: 24px;
overflow: hidden;
background: var(--sp-dark);
color: #ffffff;
text-decoration: none;
box-shadow: 0 24px 60px -30px rgba(11, 17, 16, 0.24);
margin-bottom: 48px;
transition:
transform 0.5s var(--sp-ease-out),
box-shadow 0.5s ease;
}
.sp-cs-hero:hover {
transform: translateY(-4px);
box-shadow: 0 32px 70px -30px rgba(11, 17, 16, 0.32);
}
@media (max-width: 991.98px) {
.sp-cs-hero {
grid-template-columns: 1fr;
min-height: auto;
}
}
.sp-cs-hero__media {
position: relative;
overflow: hidden;
min-height: 380px;
}
.sp-cs-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s var(--sp-ease-out);
}
.sp-cs-hero:hover .sp-cs-hero__media img {
transform: scale(1.05);
}
.sp-cs-hero__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(11, 17, 16, 0.05) 30%,
rgba(11, 17, 16, 0.5) 100%
);
pointer-events: none;
}
.sp-cs-hero__badges {
position: absolute;
top: 24px;
left: 24px;
right: 24px;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.sp-cs-hero__sector {
padding: 7px 14px;
background: rgba(255, 255, 255, 0.94);
color: var(--sp-dark);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 999px;
backdrop-filter: blur(10px);
box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.2);
}
.sp-cs-hero__year {
padding: 6px 14px;
background: rgba(11, 17, 16, 0.72);
color: var(--sp-green);
font-family: var(--sp-serif);
font-style: normal;
font-size: 16px;
border-radius: 999px;
backdrop-filter: blur(10px);
}
.sp-cs-hero__flag {
position: absolute;
bottom: 24px;
left: 24px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px 8px 12px;
background: linear-gradient(180deg, var(--sp-green-light) 0%, var(--sp-green) 100%);
color: #ffffff;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: 999px;
box-shadow:
0 12px 26px -10px rgba(11, 17, 16, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
animation: sp-pulse-flag 2.6s ease-in-out infinite;
}
.sp-cs-hero__flag i {
font-size: 14px;
color: #ffffff;
}
@keyframes sp-pulse-flag {
0%, 100% { transform: translateY(0); box-shadow: 0 12px 26px -10px rgba(11, 17, 16, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
50% { transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgba(11, 17, 16, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
}
.sp-cs-hero__panel {
padding: 48px 44px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
background:
radial-gradient(
ellipse at 100% 0%,
rgba(107, 181, 68, 0.14) 0%,
transparent 55%
),
var(--sp-dark);
position: relative;
}
@media (max-width: 991.98px) {
.sp-cs-hero__panel {
padding: 36px 28px;
}
}
.sp-cs-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sp-green);
}
.sp-cs-hero__eyebrow-line {
width: 36px;
height: 1px;
background: var(--sp-green);
}
.sp-cs-hero__title {
font-size: clamp(24px, 2.4vw, 34px);
line-height: 1.15;
letter-spacing: -0.02em;
font-weight: 700;
color: #ffffff;
margin: 0;
max-width: 22ch;
}
.sp-cs-hero__title em {
font-family: var(--sp-serif);
font-style: normal;
font-weight: 700;
color: var(--sp-green);
}
.sp-cs-hero__desc {
font-size: 14.5px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.75);
margin: 0;
max-width: 42ch;
}
.sp-cs-hero__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px 20px;
padding: 20px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 575.98px) {
.sp-cs-hero__stats {
grid-template-columns: 1fr 1fr;
}
}
.sp-cs-hero__stats div {
display: flex;
flex-direction: column;
gap: 4px;
}
.sp-cs-hero__stats strong {
font-size: clamp(22px, 2vw, 28px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: #ffffff;
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.sp-cs-hero__stats em {
font-family: var(--sp-serif);
font-style: normal;
font-weight: 400;
color: var(--sp-green);
font-size: 0.6em;
}
.sp-cs-hero__stats > div em {
font-family: inherit;
font-style: normal;
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.sp-cs-hero__stats span {
font-size: 11.5px;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.01em;
}
.sp-cs-hero__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.sp-cs-hero__location {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}
.sp-cs-hero__location i {
color: var(--sp-green);
}
.sp-cs-hero__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
background: var(--sp-green);
color: var(--sp-dark);
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: all 0.3s var(--sp-ease);
}
.sp-cs-hero__cta i {
transition: transform 0.3s var(--sp-ease);
}
.sp-cs-hero:hover .sp-cs-hero__cta {
gap: 14px;
box-shadow: 0 8px 20px -6px rgba(107, 181, 68, 0.5);
}
.sp-cs-hero:hover .sp-cs-hero__cta i {
transform: translateX(4px);
}
/* ---- Curated grid — 4 smaller case studies ---- */
.sp-cs-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 991.98px) {
.sp-cs-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 575.98px) {
.sp-cs-grid {
grid-template-columns: 1fr;
}
}
.sp-cs {
position: relative;
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 18px;
overflow: hidden;
color: var(--sp-dark);
text-decoration: none;
transition:
transform 0.4s var(--sp-ease-out),
box-shadow 0.4s ease,
border-color 0.4s ease;
}
.sp-cs:hover {
transform: translateY(-4px);
border-color: rgba(107, 181, 68, 0.35);
box-shadow: 0 20px 40px -22px rgba(11, 17, 16, 0.16);
}
.sp-cs__num {
position: absolute;
top: 14px;
right: 14px;
z-index: 3;
padding: 4px 10px;
background: rgba(255, 255, 255, 0.95);
border-radius: 999px;
font-family: var(--sp-serif);
font-style: normal;
font-size: 13px;
font-weight: 400;
color: var(--sp-green-text);
backdrop-filter: blur(8px);
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.15);
}
.sp-cs__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--sp-light);
}
.sp-cs__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--sp-ease-out);
}
.sp-cs:hover .sp-cs__media img {
transform: scale(1.06);
}
.sp-cs__body {
padding: 20px 20px 22px;
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
}
.sp-cs__meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.sp-cs__sector {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sp-green-text);
}
.sp-cs__loc {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11.5px;
color: var(--sp-muted);
font-weight: 500;
}
.sp-cs__loc i {
font-size: 12px;
color: var(--sp-muted);
}
.sp-cs__title {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--sp-dark);
line-height: 1.2;
margin: 0;
transition: color 0.3s ease;
}
.sp-cs:hover .sp-cs__title {
color: var(--sp-green-text);
}
.sp-cs__kpi {
font-size: 12px;
color: var(--sp-muted);
padding-top: 10px;
border-top: 1px dashed var(--sp-border-2);
}
.sp-cs__kpi strong {
font-weight: 700;
color: var(--sp-dark);
}
.sp-cs__arrow {
position: absolute;
bottom: 20px;
right: 20px;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--sp-light);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--sp-dark);
font-size: 15px;
transition: all 0.35s var(--sp-ease);
}
.sp-cs:hover .sp-cs__arrow {
background: var(--sp-green);
color: var(--sp-dark);
transform: rotate(-45deg) scale(1.08);
}
/* Foot */
.sp-projects__foot {
display: flex;
justify-content: center;
margin-top: 48px;
}
/* ============================================
IMPACT
============================================ */
.sp-impact {
background: var(--sp-dark);
color: #ffffff;
overflow: hidden;
isolation: isolate;
}
.sp-impact__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.sp-impact__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 90px 90px;
mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
-webkit-mask-image: radial-gradient(
ellipse at center,
black 20%,
transparent 80%
);
}
.sp-impact__glow {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 800px;
height: 400px;
background: radial-gradient(
ellipse,
rgba(123, 203, 85, 0.14),
transparent 70%
);
filter: blur(50px);
}
.sp-impact__grid-nums {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-top: 60px;
}
@media (max-width: 767.98px) {
.sp-impact__grid-nums {
grid-template-columns: 1fr 1fr;
}
}
.sp-impact__item {
padding: 48px 20px;
border-right: 1px solid rgba(255, 255, 255, 0.08);
text-align: center;
}
.sp-impact__item:last-child {
border-right: 0;
}
@media (max-width: 767.98px) {
.sp-impact__item:nth-child(2) {
border-right: 0;
}
.sp-impact__item:nth-child(1),
.sp-impact__item:nth-child(2) {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
}
.sp-impact__item strong {
display: block;
font-size: clamp(52px, 6.5vw, 96px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.6));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 14px;
}
.sp-impact__item span {
display: block;
color: rgba(255, 255, 255, 0.55);
font-size: 13.5px;
letter-spacing: 0.04em;
}
.sp-impact__note {
text-align: center;
margin-top: 24px;
font-size: 12px;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 0.04em;
}
.sp-impact__note code {
color: var(--sp-green);
background: rgba(123, 203, 85, 0.1);
padding: 2px 6px;
border-radius: 4px;
font-family: inherit;
font-size: 11px;
}
/* ============================================
WHY SYNERGY — numbered editorial rows
============================================ */
.sp-why {
background: var(--sp-light);
}
.sp-why__list {
display: grid;
gap: 0;
border-top: 1px solid var(--sp-border);
}
.sp-why-row {
position: relative;
display: grid;
grid-template-columns: 96px 64px 1fr 56px;
align-items: center;
gap: 32px;
padding: 32px 24px;
border-bottom: 1px solid var(--sp-border);
color: var(--sp-dark);
text-decoration: none;
overflow: hidden;
isolation: isolate;
transition:
padding 0.5s var(--sp-ease),
background 0.5s ease;
}
.sp-why-row::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(107, 181, 68, 0.07) 0%,
transparent 70%
);
opacity: 0;
transition: opacity 0.5s ease;
z-index: -1;
}
.sp-why-row:hover {
padding-left: 40px;
padding-right: 40px;
}
.sp-why-row:hover::before {
opacity: 1;
}
@media (max-width: 767.98px) {
.sp-why-row {
grid-template-columns: 60px 1fr 40px;
grid-template-areas:
"num icon arrow"
"body body body";
gap: 12px 16px;
padding: 24px 16px;
}
.sp-why-row:hover {
padding-left: 20px;
padding-right: 20px;
}
.sp-why-row__num {
grid-area: num;
}
.sp-why-row__icon {
grid-area: icon;
}
.sp-why-row__body {
grid-area: body;
}
.sp-why-row__arrow {
grid-area: arrow;
justify-self: end;
}
}
.sp-why-row__num {
font-family: var(--sp-serif);
font-style: normal;
font-weight: 400;
font-size: 52px;
color: var(--sp-border-2);
line-height: 1;
letter-spacing: -0.02em;
transition:
color 0.4s ease,
transform 0.4s var(--sp-ease-out);
}
.sp-why-row:hover .sp-why-row__num {
color: var(--sp-green-text);
transform: translateX(4px);
}
@media (max-width: 767.98px) {
.sp-why-row__num {
font-size: 34px;
}
}
.sp-why-row__icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: #ffffff;
border: 1px solid var(--sp-border);
color: var(--sp-dark);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
transition:
background 0.35s ease,
border-color 0.35s ease,
color 0.35s ease,
transform 0.4s var(--sp-ease-out);
}
.sp-why-row:hover .sp-why-row__icon {
background: linear-gradient(180deg, var(--sp-green), var(--sp-green-dark));
border-color: var(--sp-green);
color: var(--sp-dark);
transform: rotate(-4deg) scale(1.05);
}
.sp-why-row__body h3 {
font-size: clamp(20px, 1.9vw, 26px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 6px;
color: var(--sp-dark);
transition: color 0.35s ease;
}
.sp-why-row:hover .sp-why-row__body h3 {
color: var(--sp-green-text);
}
.sp-why-row__body p {
font-size: 14.5px;
color: var(--sp-muted);
margin: 0;
line-height: 1.55;
max-width: 62ch;
}
.sp-why-row__arrow {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1.5px solid var(--sp-border-2);
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--sp-dark);
font-size: 16px;
justify-self: end;
transition: all 0.4s var(--sp-ease-out);
}
.sp-why-row__arrow i {
transition: transform 0.4s var(--sp-ease);
}
.sp-why-row:hover .sp-why-row__arrow {
background: var(--sp-green);
border-color: var(--sp-green);
color: var(--sp-dark);
transform: scale(1.08);
}
.sp-why-row:hover .sp-why-row__arrow i {
transform: translate(3px, -3px);
}
/* ============================================
UK COVERAGE + FAQ — background image + floating map
============================================ */
.sp-coverage {
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--sp-dark);
color: #ffffff;
}
.sp-coverage__bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.sp-coverage__bg-img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.9);
}
.sp-coverage__bg-scrim {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(11, 17, 16, 0.75) 0%,
rgba(11, 17, 16, 0.88) 100%
),
radial-gradient(
ellipse at 20% 30%,
rgba(107, 181, 68, 0.18),
transparent 55%
);
}
/* Section head text — light on dark bg */
.sp-coverage .sp-label {
color: rgba(255, 255, 255, 0.6);
}
.sp-coverage .sp-h2 {
color: #ffffff;
}
.sp-coverage .sp-h2 em {
color: var(--sp-green);
}
.sp-coverage .sp-section__intro {
color: rgba(255, 255, 255, 0.72);
}
.sp-coverage__wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: stretch;
}
@media (max-width: 991.98px) {
.sp-coverage__wrap {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* ---- Both sides sit directly on the section bg (no cards) ---- */
.sp-coverage__map-wrap {
padding-top: 4px;
}
.sp-coverage__map-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
margin-bottom: 20px;
}
.sp-coverage__map-label {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
}
.sp-coverage__map-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--sp-green);
box-shadow: 0 0 0 4px rgba(107, 181, 68, 0.28);
animation: sp-pulse 1.8s infinite;
}
.sp-coverage__map-count {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
font-weight: 500;
}
.sp-coverage__map-count strong {
font-family: var(--sp-serif);
font-style: normal;
font-weight: 400;
font-size: 16px;
color: var(--sp-green);
margin-right: 6px;
}
.sp-coverage__map-body {
display: flex;
align-items: flex-start;
justify-content: center;
padding: 0 0 16px;
margin-top: -20px;
}
.sp-coverage__map {
width: 100%;
max-width: 640px;
height: auto;
display: block;
filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.5));
margin-top: -60px;
}
.sp-coverage__offices {
list-style: none;
padding: 20px 0 0;
margin: 20px 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px 20px;
}
@media (max-width: 575.98px) {
.sp-coverage__offices {
grid-template-columns: 1fr;
}
}
.sp-coverage__offices li {
display: grid;
grid-template-columns: 22px 1fr;
gap: 10px;
align-items: center;
}
.sp-coverage__pin {
width: 18px;
height: 24px;
position: relative;
display: inline-block;
}
.sp-coverage__pin::before {
content: "";
position: absolute;
inset: 0 0 3px 0;
background: var(--sp-green);
border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
transform: rotate(-45deg);
transform-origin: 50% 60%;
box-shadow: 0 3px 10px -3px rgba(107, 181, 68, 0.5);
}
.sp-coverage__pin::after {
content: "";
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 3px;
background: rgba(11, 17, 16, 0.14);
border-radius: 50%;
filter: blur(1px);
}
.sp-coverage__offices strong {
display: block;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
font-weight: 600;
margin-bottom: 2px;
}
.sp-coverage__offices span {
font-size: 13px;
color: #ffffff;
font-weight: 600;
}
/* ---- FAQ side (right) — sits directly on section bg ---- */
.sp-coverage__faq-wrap {
padding-top: 4px;
}
.sp-coverage__faq-label {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sp-green);
font-weight: 700;
margin-bottom: 14px;
}
.sp-coverage__faq-line {
width: 28px;
height: 1px;
background: var(--sp-green);
}
.sp-coverage__faq-title {
font-size: clamp(22px, 2.1vw, 28px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
color: #ffffff;
margin: 0 0 22px;
max-width: 24ch;
}
/* FAQ accordions on dark */
.sp-coverage .sp-faq {
border-top-color: rgba(255, 255, 255, 0.1);
}
.sp-coverage .sp-faq:last-child {
border-bottom-color: rgba(255, 255, 255, 0.1);
}
.sp-coverage .sp-faq summary {
color: #ffffff;
}
.sp-coverage .sp-faq summary:hover {
color: var(--sp-green);
}
.sp-coverage .sp-faq summary i {
color: var(--sp-green);
}
.sp-coverage .sp-faq p {
color: rgba(255, 255, 255, 0.7);
}
.sp-coverage .sp-faq p strong {
color: #ffffff;
}
.sp-faq-list {
display: grid;
gap: 4px;
}
.sp-faq {
border-top: 1px solid var(--sp-border);
padding: 4px 0;
}
.sp-faq:last-child {
border-bottom: 1px solid var(--sp-border);
}
.sp-faq summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 16px 0;
cursor: pointer;
list-style: none;
font-size: 15.5px;
font-weight: 600;
color: var(--sp-dark);
letter-spacing: -0.005em;
transition: color 0.25s ease;
}
.sp-faq summary::-webkit-details-marker {
display: none;
}
.sp-faq summary:hover {
color: var(--sp-green-text);
}
.sp-faq summary i {
font-size: 20px;
color: var(--sp-green-text);
transition: transform 0.35s var(--sp-ease-out);
flex-shrink: 0;
}
.sp-faq[open] summary i {
transform: rotate(45deg);
}
.sp-faq p {
padding: 0 0 18px;
margin: 0;
font-size: 14px;
color: var(--sp-muted);
line-height: 1.6;
max-width: 60ch;
}
.sp-faq p strong {
color: var(--sp-dark);
font-weight: 700;
}
/* ============================================
FEATURED CASE STUDY
============================================ */
.sp-featured {
position: relative;
min-height: 720px;
display: flex;
align-items: center;
padding: 120px 0;
color: #ffffff;
overflow: hidden;
isolation: isolate;
}
.sp-featured__media {
position: absolute;
inset: 0;
z-index: -1;
}
.sp-featured__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sp-featured__media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(11, 17, 16, 0.9) 0%,
rgba(11, 17, 16, 0.5) 60%,
rgba(11, 17, 16, 0) 100%
),
linear-gradient(180deg, rgba(11, 17, 16, 0.3), rgba(11, 17, 16, 0.5));
}
.sp-featured__card {
max-width: 620px;
background: rgba(11, 17, 16, 0.35);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--sp-radius-lg);
padding: 48px;
}
@media (max-width: 575.98px) {
.sp-featured__card {
padding: 32px 24px;
}
}
.sp-featured__title {
font-size: clamp(32px, 4.4vw, 60px);
line-height: 1.05;
letter-spacing: -0.03em;
margin: 16px 0 32px;
font-weight: 700;
}
.sp-featured__title em {
font-family: var(--sp-serif);
font-style: normal;
color: var(--sp-green);
font-weight: 700;
}
.sp-featured__meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 40px;
margin-bottom: 32px;
padding: 24px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sp-featured__meta > div span {
display: block;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 6px;
}
.sp-featured__meta > div strong {
font-size: 20px;
font-weight: 600;
}
.sp-featured .sp-btn--primary {
--btn-bg: #ffffff;
--btn-color: var(--sp-dark);
--btn-border: #ffffff;
}
.sp-featured .sp-btn--primary::before {
background: var(--sp-green);
}
/* ============================================
ACCREDITATIONS
============================================ */
.sp-accred {
background: var(--sp-cream);
padding: 120px 0 110px;
border-top: 1px solid var(--sp-border);
border-bottom: 1px solid var(--sp-border);
position: relative;
overflow: hidden;
}
.sp-accred::before,
.sp-accred::after {
content: "";
position: absolute;
border-radius: 50%;
filter: blur(120px);
pointer-events: none;
z-index: 0;
}
.sp-accred::before {
width: 520px;
height: 520px;
background: var(--sp-green-soft);
opacity: 0.55;
top: -220px;
left: -180px;
}
.sp-accred::after {
width: 620px;
height: 620px;
background: rgba(107, 181, 68, 0.12);
bottom: -280px;
right: -240px;
}
.sp-accred > .container-xxl {
position: relative;
z-index: 1;
}
.sp-accred__viewport {
position: relative;
overflow: hidden;
margin-top: 64px;
-webkit-mask-image: linear-gradient(
90deg,
transparent 0,
#000 8%,
#000 92%,
transparent 100%
);
mask-image: linear-gradient(
90deg,
transparent 0,
#000 8%,
#000 92%,
transparent 100%
);
}
.sp-accred__track {
display: inline-flex;
align-items: center;
gap: 64px;
white-space: nowrap;
animation: sp-accred-scroll 55s linear infinite;
will-change: transform;
}
.sp-accred__viewport:hover .sp-accred__track {
animation-play-state: paused;
}
.sp-accred__slot {
flex-shrink: 0;
height: 64px;
min-width: 96px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 6px;
transition: transform 0.4s var(--sp-ease-out);
}
.sp-accred__slot img {
max-height: 100%;
width: auto;
max-width: 120px;
object-fit: contain;
filter: saturate(0.95);
transition:
transform 0.4s var(--sp-ease-out),
filter 0.4s ease;
}
.sp-accred__slot:hover {
transform: translateY(-4px);
}
.sp-accred__slot:hover img {
filter: saturate(1.1) drop-shadow(0 6px 14px rgba(11, 17, 16, 0.14));
}
@keyframes sp-accred-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.sp-accred__note {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 48px auto 0;
padding: 14px 24px;
background: var(--sp-white);
border: 1px solid var(--sp-border);
border-radius: 999px;
font-size: 14px;
color: var(--sp-text-2);
width: fit-content;
max-width: 100%;
box-shadow: 0 12px 32px -20px rgba(11, 17, 16, 0.18);
position: relative;
z-index: 2;
}
.sp-accred__note i {
color: var(--sp-green);
font-size: 16px;
flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
.sp-accred__track {
animation: none;
}
.sp-accred__slot:hover {
transform: none;
}
}
@media (max-width: 991.98px) {
.sp-accred__viewport {
margin-top: 48px;
}
.sp-accred__track {
gap: 48px;
animation-duration: 42s;
}
.sp-accred__slot {
height: 52px;
min-width: 80px;
}
.sp-accred__slot img {
max-width: 100px;
}
}
@media (max-width: 575.98px) {
.sp-accred {
padding: 90px 0 80px;
}
.sp-accred__viewport {
margin-top: 36px;
}
.sp-accred__track {
gap: 36px;
animation-duration: 30s;
}
.sp-accred__slot {
height: 42px;
min-width: 68px;
}
.sp-accred__slot img {
max-width: 82px;
}
.sp-accred__note {
font-size: 12.5px;
padding: 12px 18px;
text-align: left;
line-height: 1.5;
}
}
/* ============================================
TESTIMONIALS — split: video panel + Google-style reviews
============================================ */
.sp-testi {
background: var(--sp-light);
}
.sp-testi__split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: 24px;
align-items: stretch;
margin-top: 20px;
}
@media (max-width: 1199.98px) {
.sp-testi__split {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
}
/* ---------- LEFT — Video testimonials ---------- */
.sp-testi__video-panel {
position: relative;
border-radius: var(--sp-radius-lg);
overflow: hidden;
min-height: 640px;
background: #10201a;
isolation: isolate;
display: flex;
min-width: 0;
}
.sp-testi__video-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.sp-testi__video-bg img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.85);
}
.sp-testi__video-scrim {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(9, 20, 16, 0.72) 0%,
rgba(9, 20, 16, 0.5) 40%,
rgba(9, 20, 16, 0.85) 100%
);
}
.sp-testi__video-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
padding: 40px 44px 44px;
}
.sp-testi__video-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
margin-bottom: 34px;
}
.sp-testi__video-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 700;
color: var(--sp-green-light);
}
.sp-testi__video-eyebrow i {
font-size: 12px;
}
.sp-testi__video-title {
font-family: var(--sp-serif);
font-weight: 700;
font-size: 40px;
line-height: 1.1;
color: #ffffff;
letter-spacing: -0.015em;
margin: 0;
display: flex;
align-items: center;
gap: 14px;
white-space: nowrap;
}
.sp-testi__video-title em {
font-style: normal;
color: var(--sp-green-light);
}
.sp-testi__video-star {
color: #ffffff;
font-size: 20px;
flex-shrink: 0;
}
.sp-testi__video-stage {
position: relative;
flex: 1;
display: flex;
align-items: center;
min-height: 0;
min-width: 0;
}
.sp-testi__video-viewport {
overflow: hidden;
width: 100%;
min-width: 0;
padding: 6px 0;
}
.sp-testi__video-track {
display: flex;
gap: 22px;
transition: transform 0.6s var(--sp-ease-out);
will-change: transform;
}
.sp-testi__video-card {
flex: 0 0 calc((100% - 22px) / 2);
aspect-ratio: 9 / 14;
min-width: 0;
position: relative;
border-radius: 22px;
overflow: hidden;
text-decoration: none;
display: block;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 24px 44px -22px rgba(0, 0, 0, 0.6);
transition: transform 0.4s var(--sp-ease);
}
.sp-testi__video-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--sp-ease);
}
.sp-testi__video-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 40%,
rgba(0, 0, 0, 0.75) 100%
);
}
.sp-testi__video-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 72px;
height: 52px;
border-radius: 14px;
background: #ff0033;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 28px;
z-index: 2;
box-shadow: 0 12px 24px -8px rgba(255, 0, 51, 0.55);
transition: transform 0.3s var(--sp-ease);
}
.sp-testi__video-caption {
position: absolute;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 2;
color: #ffffff;
display: flex;
flex-direction: column;
gap: 2px;
}
.sp-testi__video-caption strong {
font-size: 14px;
font-weight: 700;
letter-spacing: -0.005em;
}
.sp-testi__video-caption em {
font-style: normal;
font-size: 11.5px;
color: rgba(255, 255, 255, 0.72);
letter-spacing: 0.02em;
}
.sp-testi__video-card:hover {
transform: translateY(-4px);
}
.sp-testi__video-card:hover img {
transform: scale(1.04);
}
.sp-testi__video-card:hover .sp-testi__video-play {
transform: translate(-50%, -50%) scale(1.06);
}
.sp-testi__video-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.14);
color: #ffffff;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
transition: all 0.25s var(--sp-ease);
}
.sp-testi__video-nav:hover {
background: #ffffff;
color: var(--sp-dark);
border-color: #ffffff;
}
.sp-testi__video-nav:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.sp-testi__video-nav--prev {
left: -22px;
}
.sp-testi__video-nav--next {
right: -22px;
}
@media (max-width: 575.98px) {
.sp-testi__video-nav--prev {
left: 8px;
}
.sp-testi__video-nav--next {
right: 8px;
}
}
/* ---------- RIGHT — Google-style reviews ---------- */
.sp-testi__reviews-panel {
background: var(--sp-cream);
border-radius: var(--sp-radius-lg);
padding: 40px 36px 32px;
display: flex;
flex-direction: column;
gap: 20px;
min-height: 640px;
border: 1px solid var(--sp-border);
min-width: 0;
}
.sp-testi__reviews-title {
font-family: var(--sp-serif);
font-weight: 700;
font-size: 34px;
line-height: 1.1;
color: var(--sp-dark);
letter-spacing: -0.02em;
margin: 0 0 10px;
}
.sp-testi__reviews-title em {
font-style: normal;
color: var(--sp-green-text);
}
.sp-testi__reviews-lede {
color: var(--sp-muted);
font-size: 14.5px;
line-height: 1.6;
margin: 0;
max-width: 480px;
}
.sp-testi__reviews-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
background: var(--sp-white);
border: 1px solid var(--sp-border);
border-radius: 16px;
box-shadow: 0 8px 22px -14px rgba(11, 17, 16, 0.14);
}
.sp-testi__reviews-score {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.sp-testi__reviews-score strong {
font-family: var(--sp-serif);
font-weight: 700;
font-style: normal;
font-size: 34px;
line-height: 1;
color: var(--sp-dark);
letter-spacing: -0.02em;
}
.sp-testi__reviews-stars {
display: inline-flex;
gap: 3px;
color: #f5b400;
font-size: 16px;
}
.sp-testi__reviews-score em {
font-style: normal;
font-size: 13px;
color: var(--sp-muted);
letter-spacing: 0.01em;
}
.sp-testi__reviews-brand {
font-family: "Product Sans", "Manrope", system-ui, sans-serif;
font-weight: 700;
font-size: 26px;
letter-spacing: -0.01em;
line-height: 1;
display: inline-flex;
}
.sp-testi__reviews-stage {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
min-width: 0;
}
.sp-testi__reviews-viewport {
overflow: hidden;
flex: 1;
min-width: 0;
}
.sp-testi__reviews-track {
display: flex;
gap: 16px;
transition: transform 0.6s var(--sp-ease-out);
will-change: transform;
height: 100%;
}
.sp-testi__review {
flex: 0 0 calc((100% - 16px) / 2);
min-width: 0;
background: var(--sp-white);
border: 1px solid var(--sp-border);
border-radius: 18px;
padding: 22px 20px 20px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: 0 12px 28px -20px rgba(11, 17, 16, 0.16);
transition: transform 0.35s var(--sp-ease), box-shadow 0.35s var(--sp-ease);
}
.sp-testi__review:hover {
transform: translateY(-3px);
box-shadow: 0 18px 34px -20px rgba(11, 17, 16, 0.2);
}
@media (max-width: 575.98px) {
.sp-testi__review {
flex: 0 0 100%;
}
}
.sp-testi__review header {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 12px;
align-items: center;
}
.sp-testi__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--c, var(--sp-green));
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
text-transform: uppercase;
flex-shrink: 0;
}
.sp-testi__review-who strong {
display: block;
font-size: 15px;
font-weight: 700;
color: var(--sp-dark);
letter-spacing: -0.005em;
line-height: 1.2;
}
.sp-testi__review-who em {
display: block;
font-style: normal;
font-size: 12.5px;
color: var(--sp-muted);
margin-top: 2px;
}
.sp-testi__review-g {
width: 26px;
height: 26px;
border-radius: 50%;
background: #ffffff;
border: 1px solid var(--sp-border);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: "Product Sans", "Manrope", sans-serif;
font-weight: 700;
color: #4285f4;
font-size: 14px;
line-height: 1;
}
.sp-testi__review-stars {
display: inline-flex;
gap: 2px;
color: #f5b400;
font-size: 14px;
}
.sp-testi__review p {
font-size: 14px;
line-height: 1.55;
color: var(--sp-text-2);
margin: 0;
}
.sp-testi__reviews-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 20px;
}
.sp-testi__reviews-ctrl {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--sp-border-2);
background: var(--sp-white);
color: var(--sp-dark);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: pointer;
transition: all 0.25s var(--sp-ease);
}
.sp-testi__reviews-ctrl:hover {
background: var(--sp-dark);
color: #ffffff;
border-color: var(--sp-dark);
}
.sp-testi__reviews-ctrl:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.sp-testi__reviews-dots {
display: inline-flex;
gap: 6px;
}
.sp-testi__reviews-dots .sp-testi__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--sp-border-2);
border: 0;
cursor: pointer;
padding: 0;
transition: all 0.3s ease;
}
.sp-testi__reviews-dots .sp-testi__dot.is-active {
background: var(--sp-dark);
transform: scale(1.3);
}
/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
.sp-testi__video-panel {
min-height: 540px;
}
.sp-testi__video-inner {
padding: 32px 32px 36px;
}
.sp-testi__video-title {
font-size: 32px;
}
.sp-testi__reviews-panel {
min-height: auto;
padding: 36px 30px 30px;
}
.sp-testi__reviews-title {
font-size: 28px;
}
}
@media (max-width: 575.98px) {
.sp-testi__video-panel {
min-height: 520px;
}
.sp-testi__video-inner {
padding: 26px 22px 30px;
}
.sp-testi__video-title {
font-size: 26px;
gap: 10px;
}
.sp-testi__video-star {
font-size: 18px;
}
.sp-testi__video-card {
flex: 0 0 100%;
aspect-ratio: 9 / 14;
}
.sp-testi__reviews-panel {
padding: 28px 20px 26px;
gap: 20px;
}
.sp-testi__reviews-title {
font-size: 24px;
}
.sp-testi__reviews-summary {
padding: 14px 16px;
flex-wrap: wrap;
gap: 10px;
}
.sp-testi__reviews-score strong {
font-size: 28px;
}
.sp-testi__reviews-brand {
font-size: 22px;
}
.sp-testi__review {
padding: 20px 18px 18px;
}
}
/* ============================================
PROCESS
============================================ */
.sp-process {
background: var(--sp-white);
}
.sp-process__wrap {
position: relative;
padding-left: 60px;
}
@media (min-width: 992px) {
.sp-process__wrap {
padding-left: 120px;
}
}
.sp-process__spine {
position: absolute;
left: 20px;
top: 30px;
bottom: 30px;
width: 2px;
background: var(--sp-border);
border-radius: 2px;
}
@media (min-width: 992px) {
.sp-process__spine {
left: 60px;
}
}
.sp-process__spine span {
display: block;
width: 100%;
height: 0;
background: linear-gradient(180deg, var(--sp-green), var(--sp-green-dark));
border-radius: 2px;
transition: height 0.3s linear;
box-shadow: 0 0 12px var(--sp-green-glow);
}
.sp-process__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 40px;
}
.sp-process__item {
display: grid;
grid-template-columns: auto 1fr;
gap: 32px;
align-items: start;
position: relative;
}
.sp-process__num {
font-family: var(--sp-serif);
font-style: normal;
font-size: 44px;
color: var(--sp-dark);
line-height: 1;
font-weight: 400;
position: relative;
background: var(--sp-white);
padding: 8px 0;
z-index: 2;
margin-left: -60px;
width: 60px;
text-align: center;
}
@media (min-width: 992px) {
.sp-process__num {
margin-left: -120px;
width: 120px;
font-size: 64px;
}
}
.sp-process__num::before {
content: "";
position: absolute;
left: 50%;
top: 24px;
transform: translateX(-50%);
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--sp-white);
border: 2px solid var(--sp-border);
z-index: 1;
transition: all 0.4s ease;
}
@media (min-width: 992px) {
.sp-process__num::before {
top: 34px;
}
}
.sp-process__item.is-in .sp-process__num {
color: var(--sp-green-text);
}
.sp-process__item.is-in .sp-process__num::before {
background: var(--sp-green);
border-color: var(--sp-green);
box-shadow: 0 0 16px var(--sp-green-glow);
}
.sp-process__body h3 {
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 600;
letter-spacing: -0.02em;
margin: 0 0 8px;
color: var(--sp-dark);
line-height: 1.15;
}
.sp-process__body p {
color: var(--sp-muted);
max-width: 620px;
margin: 0;
font-size: 15.5px;
line-height: 1.6;
}
.sp-process__time {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 4px 10px;
background: var(--sp-green-soft);
color: var(--sp-green-text);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.04em;
border-radius: 999px;
}
.sp-process__time i {
font-size: 12px;
}
/* ============================================
INSIGHTS — featured + list magazine layout
============================================ */
.sp-insights {
background: var(--sp-light);
}
/* ---- Simple blog cards ---- */
.sp-blog__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
@media (max-width: 991.98px) {
.sp-blog__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 575.98px) {
.sp-blog__grid { grid-template-columns: 1fr; }
}
.sp-blog {
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: var(--sp-dark);
transition:
transform 0.35s var(--sp-ease-out),
box-shadow 0.35s ease,
border-color 0.3s ease;
}
.sp-blog:hover {
transform: translateY(-4px);
border-color: rgba(107, 181, 68, 0.35);
box-shadow: 0 20px 40px -22px rgba(11, 17, 16, 0.2);
}
.sp-blog__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--sp-light-2);
}
.sp-blog__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s var(--sp-ease-out);
}
.sp-blog:hover .sp-blog__media img { transform: scale(1.05); }
.sp-blog__cat {
position: absolute;
top: 14px;
left: 14px;
padding: 5px 12px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(6px);
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
color: var(--sp-green-text);
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1;
}
.sp-blog__body {
padding: 22px 24px 24px;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.sp-blog__title {
font-size: 17px;
line-height: 1.35;
font-weight: 700;
color: var(--sp-dark);
letter-spacing: -0.01em;
margin: 0;
}
.sp-blog__meta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--sp-muted);
margin-top: auto;
padding-top: 4px;
}
.sp-insights__grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 28px;
align-items: stretch;
margin-top: 12px;
}
@media (max-width: 1199.98px) {
.sp-insights__grid {
grid-template-columns: 1fr;
gap: 22px;
}
}
.sp-insights__list {
display: flex;
flex-direction: column;
gap: 20px;
min-width: 0;
}
/* ---------- Shared card base ---------- */
.sp-insight {
position: relative;
display: flex;
flex-direction: column;
background: var(--sp-white);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius-lg);
overflow: hidden;
color: var(--sp-dark);
text-decoration: none;
transition: transform 0.4s var(--sp-ease-out),
box-shadow 0.4s var(--sp-ease-out), border-color 0.4s var(--sp-ease);
min-width: 0;
}
.sp-insight:hover {
transform: translateY(-5px);
border-color: rgba(107, 181, 68, 0.35);
box-shadow: 0 26px 48px -24px rgba(11, 17, 16, 0.22);
color: var(--sp-dark);
}
.sp-insight__media {
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.sp-insight__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.1s var(--sp-ease-out);
}
.sp-insight:hover .sp-insight__media img {
transform: scale(1.06);
}
/* Category pill overlaid on media */
.sp-insight__cat {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
background: rgba(11, 17, 16, 0.72);
color: #ffffff;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.sp-insight__cat--solar {
background: rgba(245, 180, 0, 0.92);
color: #2a1f00;
}
.sp-insight__cat--battery {
background: rgba(107, 181, 68, 0.92);
color: #0a1408;
}
.sp-insight__cat--business {
background: rgba(66, 133, 244, 0.92);
color: #ffffff;
}
.sp-insight__badge {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
background: #ffffff;
color: var(--sp-dark);
box-shadow: 0 6px 16px -8px rgba(11, 17, 16, 0.24);
}
.sp-insight__badge i {
color: #f5b400;
font-size: 10px;
}
.sp-insight__body {
padding: 28px 28px 26px;
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.sp-insight__meta {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--sp-muted);
letter-spacing: 0.02em;
}
.sp-insight__meta i {
margin-right: 5px;
color: var(--sp-green);
font-size: 12px;
}
.sp-insight__dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--sp-muted-2);
display: inline-block;
}
.sp-insight__title {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.25;
margin: 0;
color: var(--sp-dark);
}
.sp-insight__desc {
color: var(--sp-muted);
margin: 0;
font-size: 15px;
line-height: 1.55;
}
.sp-insight__cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 13.5px;
letter-spacing: 0.02em;
color: var(--sp-dark);
margin-top: 6px;
transition: gap 0.3s var(--sp-ease), color 0.3s var(--sp-ease);
}
.sp-insight__cta i {
color: var(--sp-green);
transition: transform 0.3s var(--sp-ease);
}
.sp-insight:hover .sp-insight__cta {
gap: 12px;
color: var(--sp-green-text);
}
.sp-insight:hover .sp-insight__cta i {
transform: translateX(3px);
}
/* ---------- Featured (left) ---------- */
.sp-insight--featured {
height: 100%;
}
.sp-insight--featured .sp-insight__media {
aspect-ratio: 16 / 10;
}
.sp-insight--featured .sp-insight__body {
padding: 32px 32px 30px;
gap: 14px;
}
.sp-insight--featured .sp-insight__title {
font-size: 28px;
}
/* ---------- List rows (right column, horizontal) ---------- */
.sp-insight--row {
display: grid;
grid-template-columns: 220px 1fr;
gap: 0;
flex: 1;
min-height: 200px;
}
.sp-insight--row .sp-insight__media {
height: 100%;
}
.sp-insight--row .sp-insight__body {
padding: 22px 24px 22px;
justify-content: space-between;
}
.sp-insight--row .sp-insight__title {
font-size: 17px;
line-height: 1.3;
}
@media (max-width: 575.98px) {
.sp-insight--row {
grid-template-columns: 1fr;
}
.sp-insight--row .sp-insight__media {
aspect-ratio: 16 / 10;
}
.sp-insight--featured .sp-insight__body {
padding: 26px 22px 24px;
}
.sp-insight--featured .sp-insight__title {
font-size: 22px;
}
.sp-insight__body {
padding: 22px 22px 20px;
}
}
.sp-insights__foot {
display: flex;
justify-content: center;
margin-top: 40px;
}
/* ============================================
FINAL CTA
============================================ */
.sp-final {
position: relative;
padding: 140px 0;
color: #ffffff;
overflow: hidden;
isolation: isolate;
background: var(--sp-dark);
}
@media (max-width: 767.98px) {
.sp-final {
padding: 90px 0;
}
}
.sp-final__bg {
position: absolute;
inset: 0;
z-index: -1;
}
.sp-final__bg img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.6;
}
.sp-final__overlay {
position: absolute;
inset: 0;
background:
radial-gradient(
circle at 30% 50%,
rgba(123, 203, 85, 0.15),
transparent 60%
),
linear-gradient(
180deg,
rgba(11, 17, 16, 0.6) 0%,
rgba(11, 17, 16, 0.85) 60%,
rgba(11, 17, 16, 0.95) 100%
);
}
.sp-final__lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.sp-final__inner {
text-align: center;
max-width: 900px;
margin: 0 auto;
position: relative;
}
.sp-final__inner .sp-label {
margin-bottom: 24px;
}
.sp-final__title {
font-size: clamp(40px, 7vw, 108px);
line-height: 0.95;
letter-spacing: -0.03em;
margin: 0 0 24px;
font-weight: 700;
}
.sp-final__title em {
font-family: var(--sp-serif);
font-style: normal;
color: var(--sp-green);
font-weight: 700;
}
.sp-final__lede {
font-size: 18px;
color: rgba(255, 255, 255, 0.7);
max-width: 560px;
margin: 0 auto 40px;
line-height: 1.55;
}
.sp-final__ctas {
display: inline-flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-bottom: 0;
}
/* ---------- Kinetic title ---------- */
.sp-final__title .sp-final__word {
display: inline-block;
opacity: 0;
transform: translateY(28px);
animation: sp-final-word-in 0.9s var(--sp-ease-out) forwards;
margin-right: 0.15em;
}
.sp-final__title .sp-final__word:nth-child(1) { animation-delay: 0.10s; }
.sp-final__title .sp-final__word:nth-child(2) { animation-delay: 0.18s; }
.sp-final__title .sp-final__word:nth-child(3) { animation-delay: 0.26s; }
.sp-final__title .sp-final__word:nth-child(4) { animation-delay: 0.34s; }
.sp-final__title .sp-final__word:nth-child(6) { animation-delay: 0.48s; }
.sp-final__title .sp-final__word:nth-child(7) { animation-delay: 0.56s; }
@keyframes sp-final-word-in {
to { opacity: 1; transform: translateY(0); }
}
.sp-final__word--accent {
position: relative;
color: var(--sp-green-light);
font-family: var(--sp-serif);
font-style: normal;
font-weight: 700;
padding: 0 0.05em;
}
.sp-final__underline {
position: absolute;
left: 0;
right: 0;
bottom: 6%;
height: 8px;
background: var(--sp-green);
border-radius: 6px;
transform: scaleX(0);
transform-origin: left center;
animation: sp-final-underline 1s var(--sp-ease-out) 0.9s forwards;
opacity: 0.55;
z-index: -1;
}
@keyframes sp-final-underline {
to { transform: scaleX(1); }
}
.sp-final__word--italic {
font-family: var(--sp-serif);
font-style: normal;
font-weight: 700;
color: var(--sp-green);
}
.sp-final__lede,
.sp-final__ctas {
animation: sp-final-fade-up 1s var(--sp-ease-out) 0.9s both;
}
@keyframes sp-final-fade-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Reduced-motion — kill decorative animation loops */
@media (prefers-reduced-motion: reduce) {
.sp-final__title .sp-final__word,
.sp-final__lede,
.sp-final__ctas,
.sp-final__underline {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* ============================================
FOOTER
============================================ */
.sp-footer {
position: relative;
background: var(--sp-light);
color: var(--sp-muted);
padding: 0 0 36px;
isolation: isolate;
overflow: hidden;
border-top: 1px solid var(--sp-border);
}
.sp-footer::before {
content: "";
position: absolute;
width: 640px;
height: 640px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(107, 181, 68, 0.1),
transparent 70%
);
filter: blur(80px);
top: -220px;
right: -220px;
z-index: 0;
pointer-events: none;
}
.sp-footer > * {
position: relative;
z-index: 1;
}
.sp-footer__accent {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(107, 181, 68, 0.5) 30%,
rgba(107, 181, 68, 0.5) 70%,
transparent 100%
);
z-index: 2;
}
/* ---------- Trust stats strip ---------- */
.sp-stats {
border-top: 1px solid var(--sp-border);
border-bottom: 1px solid var(--sp-border);
background: #ffffff;
}
.sp-stats-list {
list-style: none;
padding: 44px 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
@media (max-width: 991.98px) {
.sp-stats-list {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 479.98px) {
.sp-stats-list {
grid-template-columns: 1fr;
gap: 16px;
padding: 26px 0;
}
}
.sp-stats-list li {
display: grid;
grid-template-columns: 44px 1fr;
gap: 14px;
align-items: center;
min-width: 0;
}
.sp-stats-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--sp-green-soft);
border: 1px solid rgba(107, 181, 68, 0.22);
color: var(--sp-green-text);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.sp-stats-list li > span:last-child {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.sp-stats-list strong {
font-family: var(--sp-serif);
font-style: normal;
font-weight: 700;
font-size: 26px;
color: var(--sp-dark);
line-height: 1;
letter-spacing: -0.02em;
}
.sp-stats-list strong em {
font-style: normal;
color: var(--sp-green-text);
font-size: 20px;
margin-left: 2px;
}
.sp-stats-list > li > span > em {
font-style: normal;
font-size: 12.5px;
color: var(--sp-muted);
letter-spacing: 0.01em;
}
/* ---------- Newsletter band (light) ---------- */
.sp-footer__news {
position: relative;
padding: 84px 0 72px;
background: var(--sp-cream);
border-bottom: 1px solid var(--sp-border);
overflow: hidden;
}
.sp-footer__news::before {
content: "";
position: absolute;
right: -220px;
top: -220px;
width: 520px;
height: 520px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(107, 181, 68, 0.14),
transparent 70%
);
filter: blur(80px);
pointer-events: none;
}
.sp-footer__news::after {
content: "";
position: absolute;
left: -180px;
bottom: -180px;
width: 380px;
height: 380px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(245, 180, 0, 0.08),
transparent 70%
);
filter: blur(60px);
pointer-events: none;
}
.sp-footer__news-inner {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: center;
z-index: 1;
}
@media (max-width: 991.98px) {
.sp-footer__news-inner {
grid-template-columns: 1fr;
gap: 36px;
}
}
.sp-footer__news-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sp-green-text);
margin-bottom: 20px;
}
.sp-footer__news-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sp-green);
box-shadow: 0 0 0 3px rgba(107, 181, 68, 0.18);
animation: sp-pulse 2s infinite;
}
.sp-footer__news-title {
font-family: var(--sp-serif);
font-weight: 700;
font-size: clamp(32px, 3.8vw, 46px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--sp-dark);
margin: 0 0 16px;
}
.sp-footer__news-title em {
font-style: normal;
color: var(--sp-green-text);
}
.sp-footer__news-copy p {
color: var(--sp-muted);
font-size: 15px;
line-height: 1.6;
margin: 0;
max-width: 460px;
}
.sp-footer__news-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.sp-footer__news-field {
display: flex;
align-items: center;
background: #ffffff;
border: 1px solid var(--sp-border-2);
border-radius: 999px;
padding: 6px 6px 6px 22px;
box-shadow: 0 12px 28px -18px rgba(11, 17, 16, 0.14);
transition: border-color 0.3s var(--sp-ease),
box-shadow 0.3s var(--sp-ease);
}
.sp-footer__news-field:focus-within {
border-color: rgba(107, 181, 68, 0.55);
box-shadow: 0 14px 34px -14px rgba(107, 181, 68, 0.28);
}
.sp-footer__news-field > i {
color: var(--sp-muted);
font-size: 16px;
margin-right: 12px;
}
.sp-footer__news-field input {
flex: 1;
border: 0;
background: transparent;
color: var(--sp-dark);
font: inherit;
font-size: 15px;
padding: 14px 4px;
min-width: 0;
outline: none;
}
.sp-footer__news-field input::placeholder {
color: var(--sp-muted-2);
}
.sp-footer__news-field .sp-btn {
flex-shrink: 0;
border-radius: 999px;
padding: 12px 24px;
}
@media (max-width: 575.98px) {
.sp-footer__news-field {
flex-direction: column;
align-items: stretch;
border-radius: 20px;
padding: 14px;
gap: 10px;
}
.sp-footer__news-field > i {
display: none;
}
.sp-footer__news-field input {
padding: 12px 14px;
background: var(--sp-cream);
border-radius: 12px;
}
.sp-footer__news-field .sp-btn {
justify-content: center;
}
}
.sp-footer__news-note {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: var(--sp-muted);
padding-left: 6px;
}
.sp-footer__news-note i {
color: var(--sp-green);
}
/* ---------- Main body ---------- */
.sp-footer__main {
display: grid;
grid-template-columns: 1.1fr 2.2fr;
gap: 72px;
padding: 80px 0 64px;
border-bottom: 1px solid var(--sp-border);
}
@media (max-width: 1199.98px) {
.sp-footer__main {
grid-template-columns: 1fr;
gap: 48px;
}
}
.sp-footer__brand p {
color: var(--sp-muted);
max-width: 380px;
font-size: 14.5px;
margin: 22px 0 24px;
line-height: 1.6;
}
.sp-logo--light .sp-logo__mark {
fill: #111a18;
}
.sp-logo--light .sp-logo__text {
color: #ffffff;
}
.sp-footer__quick {
list-style: none;
padding: 0;
margin: 0 0 26px;
display: grid;
gap: 10px;
max-width: 380px;
}
.sp-footer__quick a {
display: grid;
grid-template-columns: 40px 1fr;
gap: 14px;
align-items: center;
padding: 12px 14px;
border-radius: 14px;
background: #ffffff;
border: 1px solid var(--sp-border);
color: var(--sp-dark);
transition: background 0.25s var(--sp-ease),
border-color 0.25s var(--sp-ease),
box-shadow 0.25s var(--sp-ease);
}
.sp-footer__quick a:hover {
background: #ffffff;
border-color: rgba(107, 181, 68, 0.35);
box-shadow: 0 10px 24px -16px rgba(11, 17, 16, 0.16);
}
.sp-footer__quick-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--sp-green-soft);
border: 1px solid rgba(107, 181, 68, 0.22);
color: var(--sp-green-text);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.sp-footer__quick-body {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.sp-footer__quick-body em {
font-style: normal;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sp-muted);
}
.sp-footer__quick-body strong {
font-size: 14.5px;
font-weight: 700;
color: var(--sp-dark);
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Social icons */
.sp-footer__social {
display: inline-flex;
gap: 10px;
}
.sp-footer__social a {
width: 40px;
height: 40px;
border-radius: 50%;
background: #ffffff;
border: 1px solid var(--sp-border-2);
color: var(--sp-text-2);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
transition: all 0.25s var(--sp-ease);
}
.sp-footer__social a:hover {
background: var(--sp-green);
border-color: var(--sp-green);
color: #ffffff;
transform: translateY(-3px);
}
/* Link columns */
.sp-footer__cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px 28px;
}
@media (max-width: 767.98px) {
.sp-footer__cols {
grid-template-columns: repeat(2, 1fr);
gap: 32px 20px;
}
}
.sp-footer__col-title {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sp-dark);
margin-bottom: 20px;
position: relative;
padding-bottom: 12px;
}
.sp-footer__col-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 24px;
height: 2px;
background: var(--sp-green);
border-radius: 2px;
}
.sp-footer__col ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 11px;
}
.sp-footer__col a {
color: var(--sp-muted);
font-size: 14px;
display: inline-flex;
align-items: center;
position: relative;
transition: color 0.25s ease, padding 0.25s ease;
}
.sp-footer__col a::before {
content: "";
position: absolute;
left: -14px;
top: 50%;
transform: translateY(-50%) scaleX(0);
transform-origin: left center;
width: 10px;
height: 1.5px;
background: var(--sp-green);
transition: transform 0.3s var(--sp-ease);
}
.sp-footer__col a:hover {
color: var(--sp-dark);
padding-left: 16px;
}
.sp-footer__col a:hover::before {
transform: translateY(-50%) scaleX(1);
}
/* ---------- Offices ---------- */
.sp-footer__offices {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 48px 0;
border-bottom: 1px solid var(--sp-border);
}
@media (max-width: 767.98px) {
.sp-footer__offices {
grid-template-columns: 1fr;
gap: 14px;
}
}
.sp-footer__office {
display: grid;
grid-template-columns: 42px 1fr;
gap: 16px;
padding: 22px 22px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
transition: background 0.3s var(--sp-ease),
border-color 0.3s var(--sp-ease),
box-shadow 0.3s var(--sp-ease);
}
.sp-footer__office:hover {
border-color: rgba(107, 181, 68, 0.35);
box-shadow: 0 14px 28px -18px rgba(11, 17, 16, 0.16);
}
.sp-footer__office-pin {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--sp-green-soft);
border: 1px solid rgba(107, 181, 68, 0.22);
color: var(--sp-green-text);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.sp-footer__office-region {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sp-dark);
margin-bottom: 8px;
}
.sp-footer__office p {
color: var(--sp-muted);
font-size: 13.5px;
margin: 0 0 12px;
line-height: 1.55;
}
.sp-footer__office-cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--sp-green-text);
transition: color 0.25s ease, gap 0.25s ease;
}
.sp-footer__office-cta:hover {
color: var(--sp-dark);
gap: 10px;
}
/* ---------- Credentials strip ---------- */
.sp-footer__creds {
padding: 26px 0;
border-bottom: 1px solid var(--sp-border);
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.sp-footer__creds-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sp-muted);
flex-shrink: 0;
}
.sp-footer__creds ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.sp-footer__creds li {
padding: 6px 14px;
border-radius: 999px;
background: #ffffff;
border: 1px solid var(--sp-border-2);
color: var(--sp-text-2);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
transition: background 0.25s var(--sp-ease),
color 0.25s var(--sp-ease), border-color 0.25s var(--sp-ease);
}
.sp-footer__creds li:hover {
background: var(--sp-green-soft);
border-color: rgba(107, 181, 68, 0.35);
color: var(--sp-green-text);
}
/* ---------- Bottom bar ---------- */
.sp-footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 18px 32px;
padding-top: 32px;
}
.sp-footer__legal {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 12.5px;
color: var(--sp-muted);
}
.sp-footer__copy strong {
color: var(--sp-dark);
font-weight: 700;
}
.sp-footer__legal-links {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 18px;
}
.sp-footer__legal a {
color: var(--sp-muted);
transition: color 0.25s ease;
position: relative;
font-size: 12.5px;
}
.sp-footer__legal a:hover {
color: var(--sp-dark);
}
.sp-footer__meta {
font-size: 12.5px;
color: var(--sp-muted);
display: inline-flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
justify-content: flex-end;
}
.sp-footer__meta-detail {
color: var(--sp-muted);
}
.sp-footer__meta-sep {
color: var(--sp-muted-2);
margin: 0 4px;
}
/* Made in Britain badge */
.sp-footer__badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
border-radius: 999px;
background: #ffffff;
border: 1px solid var(--sp-border-2);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--sp-dark);
text-transform: uppercase;
}
.sp-footer__badge-flag {
width: 22px;
height: 14px;
border-radius: 3px;
overflow: hidden;
display: inline-flex;
flex-direction: column;
border: 1px solid var(--sp-border-2);
flex-shrink: 0;
}
.sp-footer__badge-flag span {
flex: 1;
display: block;
}
.sp-footer__badge-flag span:nth-child(1) { background: #012169; }
.sp-footer__badge-flag span:nth-child(2) { background: #ffffff; }
.sp-footer__badge-flag span:nth-child(3) { background: #c8102e; }
@media (max-width: 767.98px) {
.sp-footer__main {
padding: 56px 0 44px;
}
.sp-footer__offices {
padding: 36px 0;
}
.sp-footer__creds {
padding: 22px 0;
}
.sp-footer__bottom {
flex-direction: column;
align-items: flex-start;
}
.sp-footer__meta {
justify-content: flex-start;
}
}
/* ============================================
MOBILE STICKY CTA BAR — call-first, quote fallback
Visible <992px only. Reveals after user scrolls past hero.
============================================ */
.sp-stickycta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 60;
display: none;
gap: 10px;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(255, 255, 255, 0.96);
backdrop-filter: saturate(1.4) blur(12px);
-webkit-backdrop-filter: saturate(1.4) blur(12px);
border-top: 1px solid var(--sp-border);
box-shadow: 0 -8px 24px rgba(11, 17, 16, 0.08);
transform: translateY(100%);
transition: transform 0.35s var(--sp-ease-out);
}
.sp-stickycta.is-visible {
transform: translateY(0);
}
.sp-stickycta__btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 52px;
padding: 0 14px;
border-radius: 12px;
font-family: var(--sp-font);
font-weight: 600;
text-decoration: none;
letter-spacing: 0.005em;
transition: transform 0.15s var(--sp-ease), box-shadow 0.2s var(--sp-ease);
-webkit-tap-highlight-color: transparent;
}
.sp-stickycta__btn:active {
transform: scale(0.98);
}
.sp-stickycta__btn i {
font-size: 20px;
line-height: 1;
}
.sp-stickycta__text {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.1;
}
.sp-stickycta__text em {
font-style: normal;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
opacity: 0.75;
}
.sp-stickycta__text strong {
font-size: 14px;
font-weight: 700;
}
.sp-stickycta__btn--call {
background: var(--sp-green);
color: #ffffff;
box-shadow: 0 6px 16px rgba(107, 181, 68, 0.35);
}
.sp-stickycta__btn--quote {
background: var(--sp-dark);
color: #ffffff;
}
@media (max-width: 991.98px) {
.sp-stickycta {
display: flex;
}
/* Hide floating Call + WhatsApp FABs on mobile — sticky bar replaces them */
.sp-fab {
display: none !important;
}
/* Push back-to-top above the sticky bar */
.sp-totop {
bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
}
}
@media (max-width: 374.98px) {
.sp-stickycta__text em {
display: none;
}
}
/* ============================================
FLOATING ACTION BUTTONS — Call (left) & WhatsApp (right)
============================================ */
.sp-fab {
position: fixed;
bottom: 24px;
z-index: 55;
display: inline-flex;
align-items: center;
gap: 0;
height: 56px;
padding: 0;
border-radius: 999px;
color: #ffffff;
text-decoration: none;
box-shadow: 0 14px 32px -10px rgba(11, 17, 16, 0.35);
overflow: hidden;
isolation: isolate;
opacity: 0;
pointer-events: none;
transform: translateY(20px);
transition: transform 0.4s var(--sp-ease-out),
opacity 0.35s ease,
box-shadow 0.35s var(--sp-ease-out),
width 0.4s var(--sp-ease-out);
will-change: transform;
}
.sp-fab.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.sp-fab--call {
left: 24px;
background: var(--sp-dark);
}
.sp-fab--wa {
right: 24px;
background: #25d366;
}
.sp-fab__icon {
width: 56px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
color: #ffffff;
position: relative;
z-index: 2;
}
.sp-fab--call .sp-fab__icon i {
color: var(--sp-green-light);
}
.sp-fab__label {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
max-width: 0;
padding: 0;
overflow: hidden;
white-space: nowrap;
color: #ffffff;
transition: max-width 0.4s var(--sp-ease-out),
padding 0.4s var(--sp-ease-out);
}
.sp-fab__label em {
font-style: normal;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
line-height: 1;
}
.sp-fab--wa .sp-fab__label em {
color: rgba(255, 255, 255, 0.85);
}
.sp-fab__label strong {
font-size: 14.5px;
font-weight: 700;
color: #ffffff;
letter-spacing: -0.005em;
line-height: 1.15;
margin-top: 3px;
}
.sp-fab:hover {
transform: translateY(-3px);
box-shadow: 0 18px 36px -12px rgba(11, 17, 16, 0.4);
}
.sp-fab:hover .sp-fab__label {
max-width: 240px;
padding: 0 22px 0 8px;
}
.sp-fab--wa:hover {
background: #1fbb5a;
}
/* Pulse ring */
.sp-fab__pulse {
position: absolute;
inset: 0;
border-radius: inherit;
z-index: 1;
pointer-events: none;
}
.sp-fab__pulse::before,
.sp-fab__pulse::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
animation: sp-fab-pulse 2.4s ease-out infinite;
}
.sp-fab--call .sp-fab__pulse::before,
.sp-fab--call .sp-fab__pulse::after {
box-shadow: 0 0 0 0 rgba(107, 181, 68, 0.55);
}
.sp-fab--wa .sp-fab__pulse::before,
.sp-fab--wa .sp-fab__pulse::after {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
}
.sp-fab__pulse::after {
animation-delay: 1.2s;
}
@keyframes sp-fab-pulse {
0% {
box-shadow: 0 0 0 0 currentColor;
opacity: 0.6;
}
70% {
box-shadow: 0 0 0 18px transparent;
opacity: 0;
}
100% {
box-shadow: 0 0 0 0 transparent;
opacity: 0;
}
}
.sp-fab:hover .sp-fab__pulse::before,
.sp-fab:hover .sp-fab__pulse::after {
animation-play-state: paused;
}
@media (max-width: 575.98px) {
.sp-fab {
height: 52px;
}
.sp-fab__icon {
width: 52px;
height: 52px;
font-size: 20px;
}
.sp-fab--call {
left: 14px;
bottom: 14px;
}
.sp-fab--wa {
right: 14px;
bottom: 14px;
}
/* On mobile, labels always hidden (icon only) to conserve space */
.sp-fab:hover .sp-fab__label {
max-width: 0;
padding: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.sp-fab__pulse::before,
.sp-fab__pulse::after {
animation: none;
}
}
/* ============================================
BACK TO TOP
============================================ */
.sp-totop {
position: fixed;
bottom: 96px;
right: 24px;
width: 44px;
height: 44px;
background: var(--sp-dark);
color: #ffffff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
z-index: 54;
box-shadow: 0 8px 24px -8px rgba(11, 17, 16, 0.4);
opacity: 0;
pointer-events: none;
transform: translateY(20px);
transition:
opacity 0.3s ease,
transform 0.3s ease,
background 0.25s ease;
}
.sp-totop.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.sp-totop:hover {
background: var(--sp-green);
color: #ffffff;
}
@media (max-width: 575.98px) {
.sp-totop {
bottom: 82px;
right: 14px;
width: 40px;
height: 40px;
}
}
/* ============================================
ACCREDITATIONS STRIP — after "Who we work with"
============================================ */
.sp-accred-strip {
position: relative;
padding: 56px 0 64px;
background: var(--sp-cream);
overflow: hidden;
border-top: 1px solid var(--sp-border);
border-bottom: 1px solid var(--sp-border);
}
.sp-accred-strip__head {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 32px;
}
.sp-accred-strip__lede {
font-size: 14.5px;
color: var(--sp-muted);
margin: 0;
max-width: 60ch;
line-height: 1.55;
}
.sp-accred-strip__viewport {
position: relative;
width: 100%;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.sp-accred-strip__track {
display: flex;
align-items: stretch;
gap: 18px;
width: max-content;
animation: sp-brands-scroll 40s linear infinite;
will-change: transform;
}
.sp-accred-strip:hover .sp-accred-strip__track {
animation-play-state: paused;
}
.sp-accred-strip__card {
flex-shrink: 0;
width: 200px;
height: 100px;
padding: 16px 20px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 16px;
box-shadow: 0 6px 18px -12px rgba(11, 17, 16, 0.1);
transition:
border-color 0.3s ease,
box-shadow 0.35s ease,
transform 0.4s var(--sp-ease-out);
}
.sp-accred-strip__card:hover {
border-color: rgba(107, 181, 68, 0.4);
box-shadow: 0 16px 30px -14px rgba(11, 17, 16, 0.18);
transform: translateY(-3px);
}
.sp-accred-strip__card img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
object-fit: contain;
}
@media (max-width: 767.98px) {
.sp-accred-strip { padding: 40px 0 44px; }
.sp-accred-strip__card {
width: 148px;
height: 78px;
padding: 12px 16px;
border-radius: 12px;
}
.sp-accred-strip__track { gap: 14px; }
}
/* ============================================
REVEAL ANIMATIONS (opacity + gentle lift, GPU-accelerated)
============================================ */
[data-reveal] {
opacity: 0;
transform: translate3d(0, 24px, 0);
transition:
opacity 0.9s var(--sp-ease-out),
transform 0.9s var(--sp-ease-out);
transition-delay: var(--reveal-delay, 0s);
will-change: transform, opacity;
}
[data-reveal].is-in {
opacity: 1;
transform: translate3d(0, 0, 0);
will-change: auto;
}
/* ============================================
MICRO-INTERACTIONS
============================================ */
/* Hero eyebrow — soft breathing animation on the badge dot */
@keyframes sp-breathe {
0%, 100% { box-shadow: 0 0 0 0 rgba(107, 181, 68, 0.42); }
50% { box-shadow: 0 0 0 8px rgba(107, 181, 68, 0); }
}
.sp-hero__eyebrow-dot,
.sp-dot,
.sp-brands__dot {
animation: sp-breathe 2.6s ease-in-out infinite;
}
/* Accent button — subtle shine sweep on hover */
.sp-btn--accent {
position: relative;
}
.sp-btn--accent::after {
content: "";
position: absolute;
top: 0;
left: -110%;
width: 60%;
height: 100%;
background: linear-gradient(
120deg,
transparent 0%,
rgba(255, 255, 255, 0.32) 50%,
transparent 100%
);
transform: skewX(-18deg);
transition: left 0.9s var(--sp-ease-out);
pointer-events: none;
}
.sp-btn--accent:hover::after {
left: 130%;
}
/* Section title — subtle underline reveal on scroll-in */
.sp-h2 em {
position: relative;
display: inline-block;
}
.sp-h2 em::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 2px;
background: linear-gradient(90deg, var(--sp-green), transparent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.9s 0.4s var(--sp-ease-out);
}
[data-reveal].is-in .sp-h2 em::after,
.sp-section__head [data-reveal].is-in .sp-h2 em::after {
transform: scaleX(1);
}
/* Card lift micro — universal soft rise + shadow */
.sp-mega__item,
.sp-x-card,
.sp-cs,
.sp-insight,
.sp-testi__review {
transition:
transform 0.4s var(--sp-ease-out),
box-shadow 0.4s ease,
border-color 0.3s ease;
}
/* Text link — animated underline */
.sp-arrow-link,
.sp-footer__col a,
.sp-nav__link {
position: relative;
}
.sp-arrow-link::after {
content: "";
position: absolute;
left: 0;
right: auto;
bottom: -3px;
height: 1.5px;
width: 0;
background: currentColor;
transition: width 0.4s var(--sp-ease-out);
}
.sp-arrow-link:hover::after {
width: 60%;
}
/* Icon subtle bob on card hover — where an arrow sits inside */
.sp-svc__cta i,
.sp-svc-panel__cta i,
.sp-svc-strip__cta i,
.sp-mega__item i,
.sp-cs__arrow,
.sp-cs-hero__cta i,
.sp-why-row__arrow i,
.sp-choose-row__num,
.sp-choose-card__title,
.sp-installs__foot .sp-btn i {
transition: transform 0.4s var(--sp-ease);
}
/* Image lift-in for reveal — very subtle scale */
[data-reveal] img {
transition:
transform 1.2s var(--sp-ease-out) 0.1s,
opacity 0.9s var(--sp-ease-out);
}
/* ============================================
REDUCED MOTION
============================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
[data-reveal] {
opacity: 1;
transform: none;
}
.sp-marquee__track {
animation: none;
}
}
/* ============================================
RESPONSIVE FINE-TUNING
============================================ */
@media (max-width: 767.98px) {
body {
font-size: 16px;
}
.sp-hero__ctas {
margin-bottom: 0;
}
.sp-hero__microcta {
font-size: 12.5px;
margin-bottom: 28px;
}
.sp-hero__microcta span[aria-hidden] {
margin: 0 6px;
}
.sp-hero__trust {
gap: 20px;
padding-top: 24px;
}
.sp-hero__trust-num {
font-size: 26px;
}
.sp-hero__trust-label {
font-size: 11.5px;
}
.sp-hero__ticker {
padding: 16px 0;
}
.sp-marquee {
padding: 16px 0;
}
.sp-marquee__track {
font-size: 24px;
}
.sp-eco__panel {
min-height: 320px;
}
.sp-assess__card {
border-radius: var(--sp-radius);
}
.sp-featured {
padding: 80px 0;
min-height: 620px;
}
.sp-footer {
padding: 60px 0 32px;
}
}
@media (max-width: 575.98px) {
.sp-logo__text em {
display: none;
}
.sp-hero__card {
animation: none;
}
.sp-hero__eyebrow-badge {
display: none;
}
.sp-hero__title {
font-size: 40px;
}
}
/* Keep container padding usable on very small screens */
@media (max-width: 360px) {
.container-xxl {
padding-left: 18px;
padding-right: 18px;
}
.sp-h2 {
font-size: 36px;
}
}
/* =============================================================
SOLUTIONS – PREMIUM SHARED SECTIONS (added for solutions pages)
============================================================= */
/* Benefits: 4 big benefit tiles */
.sp-sol-benefits__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 0;
}
@media (max-width: 1199.98px) { .sp-sol-benefits__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .sp-sol-benefits__grid { grid-template-columns: 1fr; } }
.sp-sol-benefit {
position: relative;
padding: 32px 28px 30px;
border-radius: var(--sp-radius);
background: var(--sp-white);
border: 1px solid var(--sp-border);
overflow: hidden;
transition: transform 0.4s var(--sp-ease), border-color 0.4s var(--sp-ease), box-shadow 0.4s var(--sp-ease);
}
.sp-sol-benefit:hover {
transform: translateY(-4px);
border-color: var(--sp-green);
box-shadow: 0 24px 50px -30px rgba(11, 17, 16, 0.25);
}
.sp-sol-benefit__num {
position: absolute;
top: 22px;
right: 24px;
font-size: 13px;
font-weight: 700;
color: var(--sp-muted-2);
letter-spacing: 0.08em;
}
.sp-sol-benefit__icon {
display: inline-flex;
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--sp-green-soft);
color: var(--sp-green-text);
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 20px;
}
.sp-sol-benefit h3 {
font-size: 22px;
font-weight: 700;
line-height: 1.15;
color: var(--sp-dark);
margin: 0 0 10px;
letter-spacing: -0.01em;
}
.sp-sol-benefit p {
font-size: 15px;
color: var(--sp-muted);
line-height: 1.55;
margin: 0;
}
.sp-sol-benefit__stat {
display: block;
margin-top: 18px;
padding-top: 16px;
border-top: 1px dashed var(--sp-border-2);
font-size: 13px;
color: var(--sp-text-2);
font-weight: 500;
}
.sp-sol-benefit__stat strong {
color: var(--sp-green-text);
font-weight: 700;
}
/* Sector use-cases: what this solution does for each sector */
.sp-sol-sectors__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 0;
}
@media (max-width: 1199.98px) { .sp-sol-sectors__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .sp-sol-sectors__grid { grid-template-columns: 1fr; } }
.sp-sol-sector {
padding: 30px 26px;
border-radius: var(--sp-radius);
background: var(--sp-white);
color: var(--sp-dark);
border: 1px solid var(--sp-border);
position: relative;
overflow: hidden;
transition: transform 0.4s var(--sp-ease), border-color 0.4s var(--sp-ease), box-shadow 0.4s var(--sp-ease);
}
.sp-sol-sector:hover {
transform: translateY(-4px);
border-color: var(--sp-green);
box-shadow: 0 24px 50px -30px rgba(11, 17, 16, 0.25);
}
.sp-sol-sector__label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sp-green-text);
font-weight: 700;
margin-bottom: 22px;
}
.sp-sol-sector__label i { font-size: 15px; }
.sp-sol-sector h3 {
font-size: 22px;
font-weight: 700;
line-height: 1.2;
margin: 0 0 12px;
color: var(--sp-dark);
letter-spacing: -0.01em;
}
.sp-sol-sector p {
font-size: 14.5px;
line-height: 1.55;
color: var(--sp-muted);
margin: 0 0 18px;
}
.sp-sol-sector ul {
list-style: none;
padding: 0;
margin: 0 0 22px;
}
.sp-sol-sector ul li {
position: relative;
padding: 8px 0 8px 22px;
font-size: 13.5px;
color: var(--sp-text-2);
border-bottom: 1px solid var(--sp-border);
}
.sp-sol-sector ul li:last-child { border-bottom: 0; }
.sp-sol-sector ul li::before {
content: '';
position: absolute;
left: 0;
top: 14px;
width: 12px;
height: 2px;
background: var(--sp-green-dark);
}
.sp-sol-sector__cta {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--sp-green-text);
font-size: 13px;
font-weight: 700;
text-decoration: none;
border-top: 1px dashed var(--sp-border-2);
padding-top: 18px;
width: 100%;
transition: color 0.25s ease, gap 0.25s ease;
}
.sp-sol-sector__cta:hover { color: var(--sp-dark); gap: 12px; }
/* 3-col variant for service-line grids (used when there are 6 items) */
.sp-sol-included__grid--3 {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 991.98px) { .sp-sol-included__grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .sp-sol-included__grid--3 { grid-template-columns: 1fr; } }
/* =============================================================
INLINE ENQUIRY FORM (used on every solution page)
============================================================= */
.sp-sol-enquire {
padding: 80px 0;
background: var(--sp-cream);
border-top: 1px solid var(--sp-border);
border-bottom: 1px solid var(--sp-border);
}
.sp-sol-enquire__wrap {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 60px;
align-items: start;
}
@media (max-width: 991.98px) { .sp-sol-enquire__wrap { grid-template-columns: 1fr; gap: 40px; } }
.sp-sol-enquire__intro h2 {
font-size: clamp(32px, 3.6vw, 46px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
margin: 16px 0 18px;
color: var(--sp-dark);
}
.sp-sol-enquire__intro h2 em {
font-style: normal;
color: var(--sp-green-text);
}
.sp-sol-enquire__intro p {
font-size: 16px;
line-height: 1.55;
color: var(--sp-muted);
margin: 0 0 26px;
max-width: 460px;
}
.sp-sol-enquire__points {
list-style: none;
padding: 0;
margin: 0;
}
.sp-sol-enquire__points li {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
font-size: 14.5px;
color: var(--sp-text-2);
border-top: 1px solid var(--sp-border);
}
.sp-sol-enquire__points li:last-child { border-bottom: 1px solid var(--sp-border); }
.sp-sol-enquire__points li i {
color: var(--sp-green-text);
font-size: 18px;
}
.sp-sol-form {
padding: 36px 34px;
background: var(--sp-white);
border-radius: var(--sp-radius-lg);
border: 1px solid var(--sp-border);
box-shadow: 0 30px 80px -50px rgba(11, 17, 16, 0.25);
}
@media (max-width: 575.98px) { .sp-sol-form { padding: 28px 22px; } }
.sp-sol-form__label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
color: var(--sp-green-text);
margin-bottom: 10px;
}
.sp-sol-form__label::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sp-green);
}
.sp-sol-form__title {
font-size: 22px;
font-weight: 700;
color: var(--sp-dark);
margin: 0 0 22px;
letter-spacing: -0.01em;
}
.sp-sol-form__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px 16px;
}
@media (max-width: 575.98px) { .sp-sol-form__grid { grid-template-columns: 1fr; } }
.sp-sol-form__field { display: flex; flex-direction: column; gap: 6px; }
.sp-sol-form__field--full { grid-column: 1 / -1; }
.sp-sol-form__field label {
font-size: 12px;
font-weight: 600;
color: var(--sp-text-2);
letter-spacing: 0.02em;
}
.sp-sol-form__field label sup { color: var(--sp-green-text); margin-left: 2px; }
.sp-sol-form__field input,
.sp-sol-form__field select,
.sp-sol-form__field textarea {
font-family: var(--sp-font);
font-size: 14.5px;
color: var(--sp-dark);
background: var(--sp-cream);
border: 1px solid var(--sp-border);
border-radius: 10px;
padding: 12px 14px;
transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
width: 100%;
}
.sp-sol-form__field textarea { resize: vertical; min-height: 100px; }
.sp-sol-form__field input:focus,
.sp-sol-form__field select:focus,
.sp-sol-form__field textarea:focus {
outline: none;
border-color: var(--sp-green);
background: var(--sp-white);
box-shadow: 0 0 0 4px var(--sp-green-soft);
}
.sp-sol-form__consent {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 12.5px;
color: var(--sp-muted);
line-height: 1.5;
margin-top: 14px;
}
.sp-sol-form__consent input[type="checkbox"] {
margin-top: 3px;
accent-color: var(--sp-green-dark);
}
.sp-sol-form__consent a { color: var(--sp-green-text); font-weight: 600; text-decoration: none; }
.sp-sol-form__consent a:hover { text-decoration: underline; }
.sp-sol-form__actions {
margin-top: 22px;
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
justify-content: space-between;
}
.sp-sol-form__reassure {
font-size: 12px;
color: var(--sp-muted-2);
display: inline-flex;
align-items: center;
gap: 6px;
}
.sp-sol-form__reassure i { color: var(--sp-green-text); }
/* Anatomy: system component visual */
.sp-sol-anatomy__wrap {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 60px;
align-items: center;
margin-top: 30px;
}
@media (max-width: 991.98px) { .sp-sol-anatomy__wrap { grid-template-columns: 1fr; gap: 40px; } }
.sp-sol-anatomy__figure {
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--sp-radius-lg);
overflow: hidden;
background: var(--sp-dark);
}
.sp-sol-anatomy__figure img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.9;
}
.sp-sol-anatomy__figure::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(11,17,16,0) 40%, rgba(11,17,16,0.55) 100%);
}
.sp-sol-anatomy__list {
list-style: none;
padding: 0;
margin: 0;
}
.sp-sol-anatomy__list li {
display: grid;
grid-template-columns: 46px 1fr;
gap: 20px;
padding: 22px 0;
border-bottom: 1px solid var(--sp-border);
}
.sp-sol-anatomy__list li:first-child { padding-top: 0; }
.sp-sol-anatomy__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.sp-sol-anatomy__num {
display: flex;
width: 46px;
height: 46px;
border-radius: 12px;
background: var(--sp-dark);
color: var(--sp-green-light);
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 15px;
letter-spacing: 0.02em;
}
.sp-sol-anatomy__list h4 {
font-size: 18px;
font-weight: 700;
margin: 0 0 6px;
color: var(--sp-dark);
}
.sp-sol-anatomy__list p {
font-size: 14.5px;
color: var(--sp-muted);
line-height: 1.55;
margin: 0;
}
/* Spec comparison table */
.sp-sol-specs-table {
margin-top: 0;
border-radius: var(--sp-radius);
overflow: hidden;
border: 1px solid var(--sp-border);
background: var(--sp-white);
}
.sp-sol-specs-table table {
width: 100%;
border-collapse: collapse;
font-size: 14.5px;
}
.sp-sol-specs-table thead th {
padding: 22px 20px;
text-align: left;
background: var(--sp-dark);
color: var(--sp-white);
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 700;
vertical-align: bottom;
}
.sp-sol-specs-table thead th:first-child { background: var(--sp-dark-2); }
.sp-sol-specs-table thead th small {
display: block;
margin-top: 4px;
font-size: 12px;
color: var(--sp-green-light);
letter-spacing: 0.04em;
text-transform: none;
font-weight: 500;
}
.sp-sol-specs-table tbody td {
padding: 16px 20px;
border-top: 1px solid var(--sp-border);
color: var(--sp-text);
vertical-align: top;
}
.sp-sol-specs-table tbody td:first-child {
background: var(--sp-cream);
font-weight: 600;
color: var(--sp-dark);
width: 26%;
}
.sp-sol-specs-table tbody tr:hover td:not(:first-child) { background: var(--sp-green-soft); }
@media (max-width: 767.98px) {
.sp-sol-specs-table { overflow-x: auto; }
.sp-sol-specs-table table { min-width: 620px; }
}
/* Pricing / tiers */
.sp-sol-pricing__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-top: 0;
}
@media (max-width: 991.98px) { .sp-sol-pricing__grid { grid-template-columns: 1fr; } }
.sp-sol-tier {
padding: 34px 30px;
border-radius: var(--sp-radius);
background: var(--sp-white);
border: 1px solid var(--sp-border);
display: flex;
flex-direction: column;
transition: transform 0.4s var(--sp-ease), border-color 0.4s var(--sp-ease), box-shadow 0.4s var(--sp-ease);
}
.sp-sol-tier:hover { transform: translateY(-4px); border-color: var(--sp-green); box-shadow: 0 24px 50px -30px rgba(11, 17, 16, 0.25); }
.sp-sol-tier--featured {
background: var(--sp-dark);
color: var(--sp-white);
border-color: var(--sp-dark);
position: relative;
}
.sp-sol-tier--featured .sp-sol-tier__badge {
position: absolute;
top: -14px;
left: 30px;
background: var(--sp-green);
color: var(--sp-dark);
padding: 6px 14px;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
border-radius: 999px;
}
.sp-sol-tier__label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sp-muted);
margin-bottom: 12px;
}
.sp-sol-tier--featured .sp-sol-tier__label { color: var(--sp-green-light); }
.sp-sol-tier h3 {
font-size: 26px;
font-weight: 700;
margin: 0 0 8px;
color: var(--sp-dark);
letter-spacing: -0.01em;
}
.sp-sol-tier--featured h3 { color: var(--sp-white); }
.sp-sol-tier__price {
font-size: 15px;
color: var(--sp-muted);
margin-bottom: 20px;
}
.sp-sol-tier--featured .sp-sol-tier__price { color: rgba(255,255,255,0.7); }
.sp-sol-tier__price strong {
font-size: 34px;
color: var(--sp-dark);
font-weight: 700;
display: block;
margin-bottom: 2px;
letter-spacing: -0.02em;
}
.sp-sol-tier--featured .sp-sol-tier__price strong { color: var(--sp-white); }
.sp-sol-tier__price em {
font-style: normal;
font-size: 14px;
font-weight: 500;
color: var(--sp-muted-2);
margin-left: 6px;
}
.sp-sol-tier ul {
list-style: none;
padding: 0;
margin: 0 0 26px;
flex: 1;
}
.sp-sol-tier ul li {
padding: 10px 0 10px 26px;
font-size: 14px;
color: var(--sp-text-2);
position: relative;
border-bottom: 1px solid var(--sp-border);
}
.sp-sol-tier--featured ul li { color: rgba(255,255,255,0.82); border-bottom-color: rgba(255,255,255,0.08); }
.sp-sol-tier ul li::before {
content: "\F26E";
font-family: "bootstrap-icons";
position: absolute;
left: 0;
top: 9px;
color: var(--sp-green-text);
font-size: 14px;
}
.sp-sol-tier--featured ul li::before { color: var(--sp-green-light); }
.sp-sol-tier ul li:last-child { border-bottom: 0; }
.sp-sol-tier .sp-btn { width: 100%; justify-content: center; }
/* Trust bar / accreditations strip */
.sp-sol-trust {
padding: 44px 0;
border-top: 1px solid var(--sp-border);
border-bottom: 1px solid var(--sp-border);
background: var(--sp-white);
}
.sp-sol-trust__inner {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 40px;
align-items: center;
}
@media (max-width: 991.98px) { .sp-sol-trust__inner { grid-template-columns: 1fr; text-align: center; } }
.sp-sol-trust__intro h3 {
font-size: 22px;
font-weight: 700;
color: var(--sp-dark);
margin: 6px 0 0;
letter-spacing: -0.01em;
}
.sp-sol-trust__intro p {
font-size: 14px;
color: var(--sp-muted);
margin: 6px 0 0;
}
.sp-sol-trust__logos {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
align-items: center;
}
@media (max-width: 991.98px) { .sp-sol-trust__logos { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 575.98px) { .sp-sol-trust__logos { grid-template-columns: repeat(3, 1fr); } }
.sp-sol-trust__logos img {
width: 100%;
height: 46px;
object-fit: contain;
opacity: 0.65;
filter: grayscale(1);
transition: opacity 0.3s ease, filter 0.3s ease;
}
.sp-sol-trust__logos img:hover { opacity: 1; filter: grayscale(0); }
/* Installation gallery */
.sp-sol-gallery__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
grid-auto-flow: dense;
gap: 14px;
margin-top: 0;
}
@media (max-width: 991.98px) { .sp-sol-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; } }
@media (max-width: 479.98px) { .sp-sol-gallery__grid { grid-template-columns: 1fr; } }
.sp-sol-gallery__item {
overflow: hidden;
border-radius: var(--sp-radius-sm);
position: relative;
}
.sp-sol-gallery__item--tall { grid-row: span 2; }
.sp-sol-gallery__item--wide { grid-column: span 2; }
@media (max-width: 479.98px) { .sp-sol-gallery__item--tall, .sp-sol-gallery__item--wide { grid-row: span 1; grid-column: span 1; } }
.sp-sol-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--sp-ease-out);
}
.sp-sol-gallery__item:hover img { transform: scale(1.05); }
.sp-sol-gallery__caption {
position: absolute;
left: 14px;
bottom: 12px;
right: 14px;
color: #ffffff;
font-size: 12.5px;
font-weight: 600;
z-index: 2;
text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
/* Pull quote */
.sp-sol-quote {
padding: 70px 0;
background: var(--sp-dark);
color: var(--sp-white);
}
.sp-sol-quote__inner {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.sp-sol-quote__mark {
color: var(--sp-green);
font-size: 48px;
line-height: 1;
margin-bottom: 16px;
}
.sp-sol-quote blockquote {
font-size: clamp(24px, 3vw, 34px);
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--sp-white);
margin: 0 0 26px;
}
.sp-sol-quote blockquote em { color: var(--sp-green-light); font-style: normal; font-weight: 600; }
.sp-sol-quote cite {
font-style: normal;
font-size: 14px;
color: rgba(255,255,255,0.7);
letter-spacing: 0.02em;
}
.sp-sol-quote cite strong { color: var(--sp-white); font-weight: 700; }
/* Hub cards: sector-of-benefit chips */
.sp-sol-hub__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 16px;
}
.sp-sol-hub__chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: var(--sp-green-soft);
color: var(--sp-green-text);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Compact info row (used near hero) */
.sp-sol-strip {
padding: 26px 0;
background: var(--sp-dark);
color: rgba(255,255,255,0.85);
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sp-sol-strip__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
align-items: center;
}
@media (max-width: 767.98px) { .sp-sol-strip__grid { grid-template-columns: repeat(2, 1fr); } }
.sp-sol-strip__item {
display: flex;
gap: 14px;
align-items: center;
}
.sp-sol-strip__item i {
font-size: 22px;
color: var(--sp-green-light);
}
.sp-sol-strip__item strong {
display: block;
color: var(--sp-white);
font-size: 15px;
font-weight: 700;
line-height: 1.15;
}
.sp-sol-strip__item span {
display: block;
font-size: 12.5px;
color: rgba(255,255,255,0.6);
margin-top: 2px;
}
/* Process – detailed with dividers */
.sp-sol-process-detailed {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
margin-top: 0;
border-top: 1px solid var(--sp-border);
border-bottom: 1px solid var(--sp-border);
}
@media (max-width: 991.98px) { .sp-sol-process-detailed { grid-template-columns: repeat(1, 1fr); } }
.sp-sol-process-detailed__step {
padding: 32px 24px;
border-right: 1px solid var(--sp-border);
position: relative;
}
.sp-sol-process-detailed__step:last-child { border-right: 0; }
@media (max-width: 991.98px) {
.sp-sol-process-detailed__step { border-right: 0; border-bottom: 1px solid var(--sp-border); }
.sp-sol-process-detailed__step:last-child { border-bottom: 0; }
}
.sp-sol-process-detailed__step small {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sp-green-text);
font-weight: 700;
}
.sp-sol-process-detailed__step h4 {
font-size: 19px;
font-weight: 700;
margin: 10px 0 8px;
color: var(--sp-dark);
letter-spacing: -0.01em;
}
.sp-sol-process-detailed__step p {
font-size: 14px;
color: var(--sp-muted);
line-height: 1.55;
margin: 0;
}
.sp-sol-process-detailed__step em {
display: inline-block;
font-style: normal;
margin-top: 12px;
padding: 4px 10px;
border-radius: 999px;
background: var(--sp-cream);
color: var(--sp-text-2);
font-size: 11.5px;
font-weight: 600;
}
/* =============================================================
PROJECTS PAGE — filter chips + project cards
============================================================= */
.sp-proj-filters {
display: flex;
flex-wrap: wrap;
gap: 30px 48px;
padding: 28px 30px;
background: var(--sp-white);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
margin-bottom: 40px;
align-items: flex-start;
}
.sp-proj-filters__group { display: flex; flex-direction: column; gap: 10px; }
.sp-proj-filters__label {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
color: var(--sp-muted);
}
.sp-proj-filters__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-chip {
border: 1px solid var(--sp-border-2);
background: var(--sp-white);
color: var(--sp-text-2);
padding: 8px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--sp-font);
}
.sp-chip:hover { border-color: var(--sp-green); color: var(--sp-green-text); }
.sp-chip.is-active {
background: var(--sp-dark);
color: #ffffff;
border-color: var(--sp-dark);
}
.sp-chip.is-active:hover { background: var(--sp-green-dark); border-color: var(--sp-green-dark); color: #ffffff; }
.sp-chip__count {
font-size: 10.5px;
opacity: 0.55;
font-weight: 700;
}
.sp-chip.is-active .sp-chip__count { opacity: 0.7; }
.sp-proj-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
@media (max-width: 1199.98px) { .sp-proj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .sp-proj-grid { grid-template-columns: 1fr; } }
.sp-proj-card {
display: flex;
flex-direction: column;
background: var(--sp-white);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 0.4s var(--sp-ease), border-color 0.35s ease, box-shadow 0.4s ease;
}
.sp-proj-card.is-hidden { display: none; }
.sp-proj-card:hover {
transform: translateY(-4px);
border-color: var(--sp-green);
box-shadow: 0 30px 60px -34px rgba(11,17,16,0.28);
}
.sp-proj-card__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--sp-dark);
}
.sp-proj-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--sp-ease-out);
}
.sp-proj-card:hover .sp-proj-card__media img { transform: scale(1.05); }
.sp-proj-card__tags {
position: absolute;
left: 14px;
top: 14px;
right: 14px;
display: flex;
flex-wrap: wrap;
gap: 6px;
z-index: 2;
}
.sp-proj-card__tag {
padding: 5px 10px;
border-radius: 999px;
background: rgba(11,17,16,0.72);
backdrop-filter: blur(4px);
color: #ffffff;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.sp-proj-card__tag--accent { background: var(--sp-green); color: var(--sp-dark); }
.sp-proj-card__body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.sp-proj-card__loc {
font-size: 12px;
color: var(--sp-muted);
letter-spacing: 0.02em;
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
}
.sp-proj-card__loc i { color: var(--sp-green-text); }
.sp-proj-card h3 {
font-size: 20px;
font-weight: 700;
line-height: 1.2;
color: var(--sp-dark);
letter-spacing: -0.01em;
margin: 0 0 8px;
}
.sp-proj-card p {
font-size: 14px;
color: var(--sp-muted);
line-height: 1.55;
margin: 0 0 16px;
flex: 1;
}
.sp-proj-card__meta {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 14px;
border-top: 1px dashed var(--sp-border-2);
font-size: 12.5px;
color: var(--sp-text-2);
font-weight: 600;
}
.sp-proj-card__meta strong { color: var(--sp-green-text); font-weight: 700; }
.sp-proj-card__meta i { color: var(--sp-muted-2); transition: transform 0.25s ease, color 0.25s ease; }
.sp-proj-card:hover .sp-proj-card__meta i { color: var(--sp-green-text); transform: translate(3px, -3px); }
.sp-proj-empty {
padding: 60px 30px;
text-align: center;
color: var(--sp-muted);
font-size: 15px;
border: 1px dashed var(--sp-border-2);
border-radius: var(--sp-radius);
display: none;
}
.sp-proj-empty.is-shown { display: block; }
/* =============================================================
SECTORS PAGE — hub cards + detail hero variant
============================================================= */
.sp-sect-hub__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
@media (max-width: 767.98px) { .sp-sect-hub__grid { grid-template-columns: 1fr; } }
.sp-sect-hub__card {
position: relative;
display: flex;
flex-direction: column;
min-height: 460px;
border-radius: var(--sp-radius-lg);
overflow: hidden;
text-decoration: none;
color: #ffffff;
isolation: isolate;
transition: transform 0.5s var(--sp-ease-out);
}
.sp-sect-hub__card:hover { transform: translateY(-4px); }
.sp-sect-hub__bg {
position: absolute;
inset: 0;
z-index: -2;
}
.sp-sect-hub__bg img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--sp-ease-out);
}
.sp-sect-hub__card:hover .sp-sect-hub__bg img { transform: scale(1.05); }
.sp-sect-hub__scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(11,17,16,0.15) 0%, rgba(11,17,16,0.7) 60%, rgba(11,17,16,0.92) 100%);
z-index: -1;
}
.sp-sect-hub__body {
margin-top: auto;
padding: 36px 34px;
color: #ffffff;
}
.sp-sect-hub__num {
display: inline-block;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
color: var(--sp-green-light);
margin-bottom: 14px;
}
.sp-sect-hub__body h2 {
font-size: clamp(28px, 3.2vw, 40px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: #ffffff;
margin: 0 0 12px;
}
.sp-sect-hub__body p {
font-size: 15px;
line-height: 1.55;
color: rgba(255,255,255,0.8);
margin: 0 0 22px;
max-width: 460px;
}
.sp-sect-hub__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 22px;
}
.sp-sect-hub__chip {
padding: 5px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.14);
color: #ffffff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
backdrop-filter: blur(4px);
}
.sp-sect-hub__cta {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 700;
color: var(--sp-green-light);
border-top: 1px solid rgba(255,255,255,0.15);
padding-top: 18px;
transition: gap 0.25s ease, color 0.25s ease;
}
.sp-sect-hub__card:hover .sp-sect-hub__cta { gap: 14px; color: #ffffff; }
/* =============================================================
INSIGHTS PAGE — featured article + article grid
============================================================= */
.sp-insight-featured {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 0;
background: var(--sp-dark);
color: #ffffff;
border-radius: var(--sp-radius-lg);
overflow: hidden;
border: 1px solid var(--sp-border);
text-decoration: none;
isolation: isolate;
transition: transform 0.45s var(--sp-ease-out), box-shadow 0.4s ease;
}
@media (max-width: 991.98px) { .sp-insight-featured { grid-template-columns: 1fr; } }
.sp-insight-featured:hover {
transform: translateY(-4px);
box-shadow: 0 30px 70px -35px rgba(11,17,16,0.35);
}
.sp-insight-featured__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
}
@media (max-width: 991.98px) { .sp-insight-featured__media { aspect-ratio: 16 / 9; } }
.sp-insight-featured__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s var(--sp-ease-out);
}
.sp-insight-featured:hover .sp-insight-featured__media img { transform: scale(1.05); }
.sp-insight-featured__badge {
position: absolute;
top: 22px;
left: 22px;
padding: 8px 16px;
border-radius: 999px;
background: var(--sp-green);
color: var(--sp-dark);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
z-index: 2;
}
.sp-insight-featured__body {
padding: 56px 52px;
display: flex;
flex-direction: column;
justify-content: center;
color: #ffffff;
}
@media (max-width: 767.98px) { .sp-insight-featured__body { padding: 36px 30px; } }
.sp-insight-featured__label {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
color: var(--sp-green-light);
margin-bottom: 14px;
}
.sp-insight-featured h2 {
font-size: clamp(28px, 3vw, 40px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: #ffffff;
margin: 0 0 18px;
}
.sp-insight-featured p {
font-size: 15.5px;
line-height: 1.6;
color: rgba(255,255,255,0.8);
margin: 0 0 24px;
}
.sp-insight-featured__meta {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 26px;
font-size: 12.5px;
color: rgba(255,255,255,0.6);
letter-spacing: 0.02em;
}
.sp-insight-featured__meta span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.sp-insight-featured__meta i { color: var(--sp-green-light); }
.sp-insight-featured__cta {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 700;
color: var(--sp-green-light);
border-top: 1px solid rgba(255,255,255,0.15);
padding-top: 22px;
transition: gap 0.25s ease, color 0.25s ease;
}
.sp-insight-featured:hover .sp-insight-featured__cta { gap: 14px; color: #ffffff; }
/* Article grid */
.sp-insight-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
@media (max-width: 991.98px) { .sp-insight-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .sp-insight-grid { grid-template-columns: 1fr; } }
.sp-insight-card {
display: flex;
flex-direction: column;
background: var(--sp-white);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 0.4s var(--sp-ease), border-color 0.35s ease, box-shadow 0.4s ease;
}
.sp-insight-card.is-hidden { display: none; }
.sp-insight-card:hover {
transform: translateY(-4px);
border-color: var(--sp-green);
box-shadow: 0 30px 60px -34px rgba(11,17,16,0.24);
}
.sp-insight-card__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--sp-dark);
}
.sp-insight-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--sp-ease-out);
}
.sp-insight-card:hover .sp-insight-card__media img { transform: scale(1.05); }
.sp-insight-card__cat {
position: absolute;
left: 14px;
top: 14px;
padding: 5px 11px;
border-radius: 999px;
background: rgba(11,17,16,0.75);
backdrop-filter: blur(6px);
color: #ffffff;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
z-index: 2;
}
.sp-insight-card__body {
padding: 26px 28px 28px;
display: flex;
flex-direction: column;
flex: 1;
}
.sp-insight-card__meta {
display: flex;
gap: 14px;
font-size: 12px;
color: var(--sp-muted);
letter-spacing: 0.02em;
margin-bottom: 12px;
}
.sp-insight-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.sp-insight-card__meta i { color: var(--sp-green-text); font-size: 13px; }
.sp-insight-card h3 {
font-size: 20px;
font-weight: 700;
line-height: 1.25;
color: var(--sp-dark);
letter-spacing: -0.01em;
margin: 0 0 10px;
}
.sp-insight-card p {
font-size: 14px;
line-height: 1.55;
color: var(--sp-muted);
margin: 0 0 18px;
flex: 1;
}
.sp-insight-card__cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
color: var(--sp-green-text);
padding-top: 14px;
border-top: 1px dashed var(--sp-border-2);
transition: gap 0.25s ease;
}
.sp-insight-card:hover .sp-insight-card__cta { gap: 12px; color: var(--sp-dark); }
/* =============================================================
ENERGY ASSESSMENT WIZARD (energy-assessment.php)
============================================================= */
.sp-wiz {
background: var(--sp-white);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius-lg);
overflow: hidden;
box-shadow: 0 40px 100px -60px rgba(11,17,16,0.28);
}
.sp-wiz__progress {
display: grid;
grid-template-columns: repeat(5, 1fr);
background: var(--sp-dark);
color: rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 767.98px) { .sp-wiz__progress { grid-template-columns: repeat(5, 1fr); } }
.sp-wiz__step {
padding: 22px 22px;
display: flex;
gap: 14px;
align-items: center;
border-right: 1px solid rgba(255,255,255,0.06);
font-size: 13px;
transition: color 0.3s ease, background 0.3s ease;
}
.sp-wiz__step:last-child { border-right: 0; }
.sp-wiz__step-num {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.15);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
transition: all 0.3s ease;
}
.sp-wiz__step-label {
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.2;
}
@media (max-width: 767.98px) {
.sp-wiz__step { padding: 14px 8px; justify-content: center; }
.sp-wiz__step-label { display: none; }
}
.sp-wiz__step.is-active {
color: #ffffff;
background: linear-gradient(180deg, rgba(107,181,68,0.15) 0%, rgba(107,181,68,0) 100%);
}
.sp-wiz__step.is-active .sp-wiz__step-num {
background: var(--sp-green);
border-color: var(--sp-green);
color: var(--sp-dark);
}
.sp-wiz__step.is-done {
color: rgba(255,255,255,0.85);
}
.sp-wiz__step.is-done .sp-wiz__step-num {
background: rgba(107,181,68,0.2);
border-color: rgba(107,181,68,0.5);
color: var(--sp-green-light);
}
.sp-wiz__body { padding: 56px 60px; }
@media (max-width: 767.98px) { .sp-wiz__body { padding: 36px 26px; } }
.sp-wiz__panel { display: none; }
.sp-wiz__panel.is-active { display: block; }
.sp-wiz__panel-label {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
color: var(--sp-green-text);
margin-bottom: 12px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.sp-wiz__panel-label::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sp-green);
}
.sp-wiz h2.sp-wiz__title {
font-size: clamp(26px, 3vw, 34px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--sp-dark);
margin: 0 0 12px;
}
.sp-wiz__title em { font-style: normal; color: var(--sp-green-text); }
.sp-wiz__help {
font-size: 15px;
color: var(--sp-muted);
line-height: 1.55;
margin: 0 0 30px;
max-width: 620px;
}
.sp-wiz__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px 20px;
margin-bottom: 26px;
}
@media (max-width: 575.98px) { .sp-wiz__grid { grid-template-columns: 1fr; } }
.sp-wiz__field { display: flex; flex-direction: column; gap: 8px; }
.sp-wiz__field--full { grid-column: 1 / -1; }
.sp-wiz__field label {
font-size: 13px;
font-weight: 600;
color: var(--sp-text-2);
letter-spacing: 0.01em;
}
.sp-wiz__field label sup { color: var(--sp-green-text); }
.sp-wiz__field input[type="text"],
.sp-wiz__field input[type="number"],
.sp-wiz__field input[type="email"],
.sp-wiz__field input[type="tel"],
.sp-wiz__field select,
.sp-wiz__field textarea {
font-family: var(--sp-font);
font-size: 15px;
color: var(--sp-dark);
background: var(--sp-cream);
border: 1px solid var(--sp-border);
border-radius: 12px;
padding: 14px 16px;
transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.sp-wiz__field input:focus,
.sp-wiz__field select:focus,
.sp-wiz__field textarea:focus {
outline: none;
border-color: var(--sp-green);
background: var(--sp-white);
box-shadow: 0 0 0 4px var(--sp-green-soft);
}
/* Option tiles (property type, orientation, yes/no) */
.sp-wiz__tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
}
.sp-wiz__tile {
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px 18px;
border: 1.5px solid var(--sp-border);
border-radius: 14px;
background: var(--sp-cream);
color: var(--sp-dark);
cursor: pointer;
transition: all 0.25s ease;
text-align: left;
font-family: var(--sp-font);
font-size: 14px;
font-weight: 600;
}
.sp-wiz__tile:hover { border-color: var(--sp-green); background: var(--sp-white); }
.sp-wiz__tile.is-selected {
border-color: var(--sp-green);
background: var(--sp-green-soft);
box-shadow: 0 0 0 3px rgba(107,181,68,0.15);
}
.sp-wiz__tile i {
font-size: 22px;
color: var(--sp-green-text);
}
.sp-wiz__tile small {
font-size: 12px;
color: var(--sp-muted);
font-weight: 500;
}
/* Slider */
.sp-wiz__slider-wrap {
padding: 22px 24px;
border: 1px solid var(--sp-border);
border-radius: 14px;
background: var(--sp-cream);
}
.sp-wiz__slider-top {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 14px;
}
.sp-wiz__slider-val {
font-size: 32px;
font-weight: 700;
color: var(--sp-dark);
letter-spacing: -0.02em;
line-height: 1;
}
.sp-wiz__slider-val em {
font-style: normal;
font-size: 16px;
color: var(--sp-muted);
margin-left: 6px;
font-weight: 500;
}
.sp-wiz__slider-hint {
font-size: 12.5px;
color: var(--sp-muted);
}
.sp-wiz__slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 3px;
background: linear-gradient(90deg, var(--sp-green) 0%, var(--sp-green) var(--val, 30%), var(--sp-border-2) var(--val, 30%), var(--sp-border-2) 100%);
outline: none;
cursor: pointer;
}
.sp-wiz__slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--sp-dark);
border: 3px solid #ffffff;
box-shadow: 0 4px 12px rgba(11,17,16,0.25);
cursor: pointer;
}
.sp-wiz__slider::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--sp-dark);
border: 3px solid #ffffff;
cursor: pointer;
}
/* Wizard footer / nav buttons */
.sp-wiz__foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
margin-top: 36px;
padding-top: 30px;
border-top: 1px solid var(--sp-border);
}
.sp-wiz__note {
font-size: 12.5px;
color: var(--sp-muted);
display: inline-flex;
align-items: center;
gap: 6px;
}
.sp-wiz__note i { color: var(--sp-green-text); }
/* Results dashboard */
.sp-wiz__results-hero {
padding: 40px 44px;
background: linear-gradient(135deg, var(--sp-dark) 0%, #1a2723 100%);
color: #ffffff;
border-radius: var(--sp-radius);
margin-bottom: 30px;
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: end;
}
@media (max-width: 767.98px) {
.sp-wiz__results-hero { grid-template-columns: 1fr; padding: 30px 26px; }
}
.sp-wiz__results-hero__label {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
color: var(--sp-green-light);
margin-bottom: 10px;
}
.sp-wiz__results-hero h3 {
font-size: clamp(24px, 2.6vw, 32px);
font-weight: 700;
line-height: 1.15;
color: #ffffff;
margin: 0 0 6px;
letter-spacing: -0.02em;
}
.sp-wiz__results-hero p {
font-size: 14px;
color: rgba(255,255,255,0.7);
margin: 0;
}
.sp-wiz__results-hero__system {
text-align: right;
color: #ffffff;
}
@media (max-width: 767.98px) { .sp-wiz__results-hero__system { text-align: left; } }
.sp-wiz__results-hero__system strong {
font-size: 40px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
color: var(--sp-green-light);
display: block;
}
.sp-wiz__results-hero__system span {
font-size: 13px;
color: rgba(255,255,255,0.7);
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 600;
}
.sp-wiz__metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 30px;
}
@media (max-width: 767.98px) { .sp-wiz__metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .sp-wiz__metrics { grid-template-columns: 1fr; } }
.sp-wiz__metric {
padding: 24px 22px;
background: var(--sp-cream);
border: 1px solid var(--sp-border);
border-radius: 14px;
}
.sp-wiz__metric__label {
font-size: 11.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
color: var(--sp-muted);
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.sp-wiz__metric__label i {
color: var(--sp-green-text);
font-size: 14px;
}
.sp-wiz__metric__value {
font-size: 30px;
font-weight: 700;
color: var(--sp-dark);
letter-spacing: -0.02em;
line-height: 1.05;
}
.sp-wiz__metric__value em {
font-style: normal;
font-size: 14px;
color: var(--sp-muted);
margin-left: 4px;
font-weight: 500;
}
.sp-wiz__metric__sub {
font-size: 12.5px;
color: var(--sp-muted);
margin-top: 6px;
}
.sp-wiz__disclaimer {
padding: 18px 22px;
background: var(--sp-cream);
border: 1px dashed var(--sp-border-2);
border-radius: 12px;
font-size: 12.5px;
color: var(--sp-muted);
line-height: 1.55;
margin-top: 20px;
}
/* =============================================================
OCTOPUS TRUSTED PARTNER
============================================================= */
.sp-oct-badge {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 18px 10px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
backdrop-filter: blur(8px);
color: #ffffff;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.02em;
}
.sp-oct-badge__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #7a29e0;
box-shadow: 0 0 12px rgba(122,41,224,0.7);
}
.sp-oct-badge strong { color: #b58cff; font-weight: 700; }
.sp-oct-check {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 24px;
}
@media (max-width: 575.98px) { .sp-oct-check { grid-template-columns: 1fr; } }
.sp-oct-check li {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border: 1px solid var(--sp-border);
border-radius: 12px;
background: var(--sp-white);
font-size: 14.5px;
color: var(--sp-text);
font-weight: 500;
line-height: 1.45;
}
.sp-oct-check li i {
color: var(--sp-green-text);
font-size: 18px;
flex-shrink: 0;
}
/* Corner logo mark (bottom right of hero) */
.sp-oct-cornerlogo {
position: absolute;
right: 30px;
bottom: 30px;
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
color: rgba(255,255,255,0.7);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
}
.sp-oct-cornerlogo__badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
border-radius: 12px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
backdrop-filter: blur(10px);
color: #ffffff;
}
.sp-oct-cornerlogo__badge img { height: 22px; width: auto; opacity: 0.95; }
.sp-oct-cornerlogo__year {
color: rgba(255,255,255,0.55);
font-size: 10px;
letter-spacing: 0.18em;
}
@media (max-width: 767.98px) { .sp-oct-cornerlogo { right: 20px; bottom: 20px; } .sp-oct-cornerlogo__badge { padding: 8px 12px; } .sp-oct-cornerlogo__badge img { height: 18px; } }
/* ==========================================================
TRUST & QUALITY — Solar Installed With Care
Light, clean section used on solar-pv & battery-storage
========================================================== */
.sp-trust-care {
padding: 96px 0;
background: var(--sp-white);
color: var(--sp-text);
position: relative;
}
.sp-trust-care::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: var(--sp-border);
}
.sp-trust-care__head {
max-width: 780px;
margin: 0 auto 28px;
text-align: center;
}
.sp-trust-care__head .sp-label {
justify-content: center;
}
.sp-trust-care__head h2 {
margin: 14px 0 0;
color: var(--sp-dark);
}
.sp-trust-care__intro {
max-width: 820px;
margin: 0 auto 56px;
text-align: center;
}
.sp-trust-care__intro p {
font-size: 17px;
line-height: 1.7;
color: var(--sp-text-2);
margin: 0 0 16px;
}
.sp-trust-care__intro p:last-child { margin-bottom: 0; }
.sp-trust-care__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 0 auto 56px;
}
.sp-trust-care__card {
background: var(--sp-cream);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
padding: 32px 28px;
transition: transform 0.35s var(--sp-ease), box-shadow 0.35s var(--sp-ease), border-color 0.35s var(--sp-ease);
}
.sp-trust-care__card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(11, 17, 16, 0.06);
border-color: rgba(107, 181, 68, 0.35);
}
.sp-trust-care__tick {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--sp-green-soft);
color: var(--sp-green-text);
font-size: 24px;
margin-bottom: 18px;
}
.sp-trust-care__card h3 {
font-size: 20px;
line-height: 1.3;
color: var(--sp-dark);
margin: 0 0 12px;
font-weight: 600;
}
.sp-trust-care__card p {
font-size: 15px;
line-height: 1.65;
color: var(--sp-text-2);
margin: 0;
}
.sp-trust-care__foot {
max-width: 820px;
margin: 0 auto;
text-align: center;
padding-top: 40px;
border-top: 1px solid var(--sp-border);
}
.sp-trust-care__tagline {
font-size: 20px;
font-weight: 600;
color: var(--sp-green-text);
letter-spacing: 0.01em;
margin: 0 0 14px;
}
.sp-trust-care__promise {
font-size: 16px;
line-height: 1.7;
color: var(--sp-text-2);
margin: 0;
}
@media (max-width: 991.98px) {
.sp-trust-care { padding: 72px 0; }
.sp-trust-care__grid { grid-template-columns: 1fr; gap: 18px; margin-bottom: 44px; }
.sp-trust-care__intro { margin-bottom: 40px; }
.sp-trust-care__intro p { font-size: 16px; }
.sp-trust-care__tagline { font-size: 18px; }
}
@media (max-width: 575.98px) {
.sp-trust-care { padding: 56px 0; }
.sp-trust-care__card { padding: 26px 22px; }
}
/* =========================================================
Battery Storage · Products showcase (dark section)
========================================================= */
.sp-bat-products {
position: relative;
background:
radial-gradient(1200px 500px at 85% -10%, rgba(107, 181, 68, 0.16), transparent 60%),
radial-gradient(900px 500px at 0% 100%, rgba(107, 181, 68, 0.1), transparent 60%),
#0b1110;
color: #ffffff;
overflow: hidden;
}
.sp-bat-products .sp-h2 { color: #ffffff; }
.sp-bat-products .sp-h2 em { color: var(--sp-green-light); }
.sp-bat-products__intro { color: rgba(255, 255, 255, 0.72); }
.sp-bat-products .sp-label--light {
color: rgba(255, 255, 255, 0.78);
}
.sp-bat-products__grid {
margin-top: 40px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 1199.98px) {
.sp-bat-products__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
.sp-bat-products__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 419.98px) {
.sp-bat-products__grid { grid-template-columns: 1fr; }
}
.sp-bat-prod {
position: relative;
display: flex;
flex-direction: column;
padding: 22px 22px 24px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%),
rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 18px;
transition: transform 0.35s var(--sp-ease-out),
border-color 0.35s var(--sp-ease-out),
background 0.35s var(--sp-ease-out);
}
.sp-bat-prod:hover {
transform: translateY(-4px);
border-color: rgba(107, 181, 68, 0.5);
background:
linear-gradient(180deg, rgba(107, 181, 68, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%),
rgba(255, 255, 255, 0.04);
}
.sp-bat-prod__tag {
align-self: flex-start;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sp-green-light);
padding: 5px 10px;
border: 1px solid rgba(107, 181, 68, 0.35);
border-radius: 999px;
background: rgba(107, 181, 68, 0.08);
}
.sp-bat-prod__media {
margin: 18px 0 20px;
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(closest-side, rgba(255, 255, 255, 0.06), transparent 70%),
rgba(0, 0, 0, 0.18);
border-radius: 14px;
overflow: hidden;
}
.sp-bat-prod__media img {
max-width: 78%;
max-height: 82%;
width: auto;
height: auto;
object-fit: contain;
filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45));
transition: transform 0.5s var(--sp-ease-out);
}
.sp-bat-prod:hover .sp-bat-prod__media img {
transform: scale(1.04) translateY(-2px);
}
.sp-bat-prod__name {
font-size: 20px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: #ffffff;
margin: 0 0 8px;
}
.sp-bat-prod__name em {
font-style: normal;
font-weight: 500;
color: rgba(255, 255, 255, 0.62);
font-size: 0.85em;
}
.sp-bat-prod__desc {
font-size: 13.5px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.66);
margin: 0;
}
.sp-bat-products__foot {
margin-top: 40px;
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.sp-btn--ghost-light {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.04);
}
.sp-btn--ghost-light:hover {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.08);
}
/* =========================================================
Axle Energy · Landing page (matches Axle reference design)
=========================================================
Palette references:
- Section titles: dark navy (#0f2237) large centered serif-feel
- Brand tiles: white rounded cards, soft shadow, gray/dark logo text
- Background: near-white with faint grid texture
*/
/* Shared centered title */
.sp-axle-works,
.sp-axle-control,
.sp-axle-need,
.sp-axle-how {
padding: 96px 0;
background:
radial-gradient(1200px 400px at 50% -10%, rgba(89, 132, 230, 0.06), transparent 60%),
#fbfcfe;
}
.sp-axle-need { background: #fbfcfe; }
.sp-axle-works__head,
.sp-axle-control__head,
.sp-axle-need__head {
text-align: center;
margin-bottom: 48px;
}
.sp-axle-works__title,
.sp-axle-control__title,
.sp-axle-need__title,
.sp-axle-how__title {
font-family: var(--sp-serif, "Switzer", ui-serif, Georgia, serif);
font-weight: 500;
font-size: clamp(30px, 3.4vw, 44px);
letter-spacing: -0.02em;
color: #0f2237;
margin: 0;
line-height: 1.15;
}
/* ---------- Works With ---------- */
.sp-axle-works__grid {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 980px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.sp-axle-works__grid > li:nth-child(7) {
grid-column: 2 / 3;
}
@media (max-width: 767.98px) {
.sp-axle-works__grid { grid-template-columns: repeat(2, 1fr); }
.sp-axle-works__grid > li:nth-child(7) { grid-column: 1 / -1; max-width: 260px; margin: 0 auto; }
}
.sp-axle-brand {
display: flex;
align-items: center;
justify-content: center;
min-height: 96px;
padding: 20px 22px;
background: #ffffff;
border-radius: 16px;
box-shadow:
0 1px 2px rgba(15, 34, 55, 0.04),
0 12px 30px -20px rgba(15, 34, 55, 0.18);
transition: transform 0.3s var(--sp-ease-out), box-shadow 0.3s var(--sp-ease-out);
}
.sp-axle-brand:hover {
transform: translateY(-3px);
box-shadow:
0 1px 2px rgba(15, 34, 55, 0.05),
0 20px 40px -22px rgba(15, 34, 55, 0.28);
}
.sp-axle-brand__logo {
max-width: 70%;
max-height: 56px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.sp-axle-brand__fallback {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 14px;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.02em;
color: #7a8494;
background: #f2f5f9;
border: 1px dashed #cfd6df;
border-radius: 8px;
}
/* ---------- Your battery, your control ---------- */
.sp-axle-control__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1180px;
margin: 0 auto;
}
@media (max-width: 991.98px) { .sp-axle-control__grid { grid-template-columns: 1fr; gap: 48px; } }
.sp-axle-feature {
display: flex;
flex-direction: column;
}
.sp-axle-feature__title {
font-size: 22px;
font-weight: 700;
color: #0f2237;
letter-spacing: -0.01em;
margin: 0 0 12px;
}
.sp-axle-feature__desc {
color: #56606d;
font-size: 15.5px;
line-height: 1.65;
margin: 0 0 24px;
max-width: 34ch;
}
.sp-axle-feature__art {
margin-top: auto;
background: #f2f5f9;
border-radius: 14px;
padding: 18px;
aspect-ratio: 16 / 11;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.sp-axle-feature__art svg { width: 100%; height: 100%; display: block; }
/* ---------- What you'll need ---------- */
.sp-axle-need__grid {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 22px;
max-width: 1180px;
margin: 0 auto;
}
@media (max-width: 991.98px) { .sp-axle-need__grid { grid-template-columns: 1fr; } }
.sp-axle-need__card {
position: relative;
background: #ffffff;
border: 1px solid #e5eaf1;
border-radius: 20px;
padding: 32px 34px;
box-shadow: 0 20px 40px -32px rgba(15, 34, 55, 0.14);
}
.sp-axle-need__card--brands {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 32px;
align-items: start;
}
@media (max-width: 767.98px) {
.sp-axle-need__card--brands { grid-template-columns: 1fr; }
}
.sp-axle-need__step {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 6px;
background: #d4e6c8;
color: #2f4a1f;
font-weight: 700;
font-size: 15px;
margin-bottom: 16px;
}
.sp-axle-need__body {
grid-column: 1;
}
.sp-axle-need__ttl {
font-size: 20px;
font-weight: 700;
color: #0f2237;
margin: 0 0 8px;
letter-spacing: -0.01em;
}
.sp-axle-need__desc {
font-size: 14.5px;
line-height: 1.6;
color: #56606d;
margin: 0;
}
.sp-axle-need__minibrands {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.sp-axle-need__minibrands > li:nth-child(7) {
grid-column: 1 / 4;
justify-self: start;
max-width: 33%;
}
.sp-axle-need__minibrands > li {
display: flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 8px 10px;
background: #fbfcfe;
border: 1px solid #e5eaf1;
border-radius: 10px;
}
.sp-axle-need__minibrands img {
max-width: 85%;
max-height: 28px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.sp-axle-need__minibrands .sp-axle-brand__fallback {
font-size: 11px;
padding: 4px 8px;
}
/* ---------- How it works ---------- */
.sp-axle-how__head {
max-width: 980px;
margin: 0 auto 40px;
}
.sp-axle-how__title {
font-size: clamp(26px, 2.4vw, 32px);
font-weight: 700;
color: #0f2237;
margin: 0 0 18px;
letter-spacing: -0.01em;
text-align: left;
}
.sp-axle-how__lede {
font-size: 20px;
color: #1a2a3e;
line-height: 1.55;
margin: 0;
max-width: 780px;
}
.sp-axle-how__lede strong { color: #0f2237; }
.sp-axle-how__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 991.98px) { .sp-axle-how__grid { grid-template-columns: 1fr; } }
.sp-axle-how__step {
background: #ffffff;
border: 1px solid #e5eaf1;
border-radius: 16px;
padding: 28px 26px 26px;
text-align: center;
box-shadow: 0 20px 40px -34px rgba(15, 34, 55, 0.14);
}
.sp-axle-how__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 10px;
font-size: 18px;
margin-bottom: 20px;
}
.sp-axle-how__icon--gray { background: #e9ecef; color: #4a5560; }
.sp-axle-how__icon--pink { background: #ffe1e0; color: #d64545; }
.sp-axle-how__icon--green { background: #d4e6c8; color: #2f4a1f; }
.sp-axle-how__ttl {
font-size: 18px;
font-weight: 700;
color: #0f2237;
margin: 0 0 10px;
letter-spacing: -0.01em;
}
.sp-axle-how__num {
font-style: normal;
font-weight: 500;
color: #a3adb8;
margin-right: 4px;
}
.sp-axle-how__desc {
font-size: 14.5px;
line-height: 1.6;
color: #56606d;
margin: 0;
}
/* Battery-storage teaser linking to Axle */
.sp-bat-axle-teaser {
padding: 56px 0 64px;
background: linear-gradient(180deg, #ffffff 0%, var(--sp-cream) 100%);
}
.sp-bat-axle-teaser__card {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 32px;
padding: 40px 44px;
background:
radial-gradient(600px 260px at 100% 0%, rgba(107, 181, 68, 0.18), transparent 60%),
#0b1110;
border-radius: 24px;
color: #ffffff;
overflow: hidden;
}
@media (max-width: 767.98px) {
.sp-bat-axle-teaser__card { grid-template-columns: 1fr; padding: 32px 26px; }
}
.sp-bat-axle-teaser__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sp-green-light);
margin-bottom: 12px;
}
.sp-bat-axle-teaser__eyebrow::before {
content: "";
width: 8px;
height: 8px;
background: var(--sp-green-light);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(107, 181, 68, 0.28);
}
.sp-bat-axle-teaser h3 {
font-size: clamp(24px, 2.6vw, 32px);
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.15;
margin: 0 0 10px;
color: #ffffff;
}
.sp-bat-axle-teaser h3 em {
font-style: normal;
color: var(--sp-green-light);
}
.sp-bat-axle-teaser p {
margin: 0;
color: rgba(255, 255, 255, 0.75);
line-height: 1.6;
font-size: 15px;
max-width: 620px;
}
.sp-bat-axle-teaser__cta {
white-space: nowrap;
}
/* =========================================================
About · Meet the team (wider delivery roster)
========================================================= */
.sp-team__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-top: 12px;
}
@media (max-width: 991.98px) { .sp-team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .sp-team__grid { grid-template-columns: 1fr; } }
.sp-team__card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 30px 26px 26px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 18px;
box-shadow: 0 20px 40px -32px rgba(11, 17, 16, 0.14);
transition: transform 0.35s var(--sp-ease-out),
border-color 0.3s ease,
box-shadow 0.35s ease;
}
.sp-team__card:hover {
transform: translateY(-4px);
border-color: rgba(107, 181, 68, 0.4);
box-shadow: 0 28px 48px -30px rgba(11, 17, 16, 0.2);
}
.sp-team__portrait {
width: 92px;
height: 92px;
border-radius: 50%;
background: var(--c, var(--sp-light));
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
box-shadow: inset 0 0 0 1px rgba(11, 17, 16, 0.05);
}
.sp-team__portrait span {
font-family: var(--sp-serif);
font-size: 32px;
font-weight: 700;
color: var(--tc, var(--sp-dark));
letter-spacing: -0.02em;
line-height: 1;
}
.sp-team__name {
font-size: 18px;
font-weight: 700;
color: var(--sp-dark);
letter-spacing: -0.01em;
margin: 0 0 4px;
}
.sp-team__role {
font-size: 12.5px;
font-weight: 600;
color: var(--sp-green-text);
letter-spacing: 0.02em;
margin-bottom: 12px;
}
.sp-team__desc {
font-size: 13.5px;
line-height: 1.55;
color: var(--sp-muted);
margin: 0 0 16px;
max-width: 30ch;
}
.sp-team__links {
list-style: none;
padding: 0;
margin: auto 0 0;
display: flex;
gap: 10px;
}
.sp-team__links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--sp-cream, #f6f2ec);
color: var(--sp-dark);
font-size: 14px;
text-decoration: none;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--sp-ease-out);
}
.sp-team__links a:hover {
background: var(--sp-green);
color: #ffffff;
transform: translateY(-2px);
}
.sp-team__note {
margin-top: 28px;
text-align: center;
}
.sp-team__note p {
display: inline-block;
font-size: 12px;
color: var(--sp-muted-2, var(--sp-muted));
padding: 6px 14px;
background: rgba(11, 17, 16, 0.04);
border-radius: 999px;
margin: 0;
}
.sp-team__note em { font-style: normal; }
/* =========================================================
Octopus Trusted Partner · Outgoing tariffs, side hustle & smart home
(Original design; dark-navy panels + Bootstrap Icons.
No third-party mascots or trademarked illustrations.)
========================================================= */
/* Shared dark-panel token */
:root {
--sp-oct-panel: #12123a;
--sp-oct-panel-2: #1a1d55;
--sp-oct-cyan: #7fe3ff;
--sp-oct-accent: #ff7cc2;
--sp-oct-accent-2: #f9c85b;
}
/* ------- Outgoing tariff comparison ------- */
.sp-oct-export {
background: #ffffff;
}
.sp-oct-export__head {
text-align: center;
max-width: 780px;
margin: 0 auto 40px;
}
.sp-oct-export__label {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sp-muted);
margin-bottom: 14px;
}
.sp-oct-export__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--sp-green);
box-shadow: 0 0 0 4px rgba(107, 181, 68, 0.18);
}
.sp-oct-export__title {
font-size: clamp(30px, 3.4vw, 44px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--sp-dark);
margin: 0 0 16px;
}
.sp-oct-export__title em {
font-style: normal;
color: var(--sp-green-text);
}
.sp-oct-export__intro {
font-size: 16px;
color: var(--sp-muted);
line-height: 1.65;
margin: 0;
}
.sp-oct-export__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
padding: 3px;
background: linear-gradient(135deg, var(--sp-oct-panel) 0%, var(--sp-oct-panel-2) 100%);
border-radius: 22px;
box-shadow: 0 40px 90px -50px rgba(15, 15, 55, 0.55);
}
@media (max-width: 991.98px) {
.sp-oct-export__grid { grid-template-columns: 1fr; }
}
.sp-oct-tariff {
position: relative;
padding: 36px 28px 32px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.005) 100%),
var(--sp-oct-panel);
color: rgba(255, 255, 255, 0.86);
display: flex;
flex-direction: column;
gap: 18px;
}
.sp-oct-tariff:first-child { border-radius: 20px 0 0 20px; }
.sp-oct-tariff:last-child { border-radius: 0 20px 20px 0; }
@media (max-width: 991.98px) {
.sp-oct-tariff:first-child,
.sp-oct-tariff:last-child { border-radius: 0; }
.sp-oct-tariff:first-child { border-radius: 20px 20px 0 0; }
.sp-oct-tariff:last-child { border-radius: 0 0 20px 20px; }
}
.sp-oct-tariff--featured {
background: linear-gradient(180deg, rgba(127, 227, 255, 0.08) 0%, rgba(127, 227, 255, 0.02) 100%),
var(--sp-oct-panel);
box-shadow: inset 0 1px 0 rgba(127, 227, 255, 0.25);
}
.sp-oct-tariff__pin {
position: absolute;
top: 18px;
right: 20px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 999px;
background: rgba(127, 227, 255, 0.14);
color: var(--sp-oct-cyan);
border: 1px solid rgba(127, 227, 255, 0.28);
}
.sp-oct-tariff__pin--accent {
background: rgba(249, 200, 91, 0.14);
color: var(--sp-oct-accent-2);
border-color: rgba(249, 200, 91, 0.35);
}
.sp-oct-tariff__name {
font-size: 22px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
color: #ffffff;
margin: 0;
}
.sp-oct-tariff__price {
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
padding: 14px 0 4px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.sp-oct-tariff__price strong {
font-family: var(--sp-serif);
font-size: 44px;
font-weight: 700;
color: #ffffff;
letter-spacing: -0.03em;
line-height: 1;
}
.sp-oct-tariff__price em {
font-style: normal;
color: var(--sp-oct-cyan);
font-weight: 700;
font-size: 15px;
}
.sp-oct-tariff__price span {
display: block;
width: 100%;
font-size: 12.5px;
color: rgba(255, 255, 255, 0.6);
margin-top: 4px;
}
.sp-oct-tariff__pitch {
font-size: 14.5px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.78);
margin: 0;
}
.sp-oct-tariff__pitch strong { color: var(--sp-oct-cyan); font-weight: 700; }
.sp-oct-tariff__row {
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.sp-oct-tariff__label {
display: block;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sp-oct-cyan);
margin-bottom: 6px;
}
.sp-oct-tariff__row p {
font-size: 13.5px;
color: rgba(255, 255, 255, 0.78);
line-height: 1.55;
margin: 0;
}
.sp-oct-export__disclaimer {
margin: 22px auto 0;
text-align: center;
max-width: 720px;
font-size: 12px;
color: var(--sp-muted-2, var(--sp-muted));
line-height: 1.5;
}
/* ------- Solar side hustle ------- */
.sp-oct-hustle {
background: linear-gradient(180deg, var(--sp-oct-panel) 0%, var(--sp-oct-panel-2) 100%);
color: #ffffff;
padding-top: 96px;
padding-bottom: 96px;
}
.sp-oct-hustle__head {
text-align: center;
max-width: 760px;
margin: 0 auto 48px;
}
.sp-oct-hustle__eyebrow {
display: inline-block;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sp-oct-cyan);
padding: 6px 14px;
border: 1px solid rgba(127, 227, 255, 0.35);
border-radius: 999px;
background: rgba(127, 227, 255, 0.08);
margin-bottom: 18px;
}
.sp-oct-hustle__title {
font-size: clamp(30px, 3.4vw, 44px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
color: #ffffff;
margin: 0 0 16px;
}
.sp-oct-hustle__title em {
font-style: normal;
color: var(--sp-oct-cyan);
}
.sp-oct-hustle__lede {
font-size: 17px;
color: rgba(255, 255, 255, 0.78);
line-height: 1.65;
margin: 0;
}
.sp-oct-hustle__lede strong { color: #ffffff; }
.sp-oct-hustle__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
@media (max-width: 991.98px) { .sp-oct-hustle__grid { grid-template-columns: 1fr; gap: 32px; } }
.sp-oct-hustle__card {
text-align: center;
padding: 8px 4px;
}
.sp-oct-hustle__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 84px;
height: 84px;
border-radius: 50%;
font-size: 34px;
margin-bottom: 22px;
color: #ffffff;
position: relative;
box-shadow: 0 20px 40px -22px rgba(0, 0, 0, 0.5);
}
.sp-oct-hustle__icon::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1px dashed rgba(255, 255, 255, 0.14);
pointer-events: none;
}
.sp-oct-hustle__icon--pink { background: linear-gradient(180deg, #a06dff, #6a48c9); }
.sp-oct-hustle__icon--sun { background: linear-gradient(180deg, #ff9ec7, #d94d90); }
.sp-oct-hustle__icon--data { background: linear-gradient(180deg, #7fe3ff, #4aa8d9); }
.sp-oct-hustle__card h3 {
font-size: 18px;
font-weight: 700;
color: #ffffff;
letter-spacing: -0.01em;
margin: 0 0 10px;
}
.sp-oct-hustle__card p {
font-size: 14.5px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.72);
margin: 0 auto;
max-width: 30ch;
}
.sp-oct-hustle__card strong { color: var(--sp-oct-cyan); }
/* ------- Home power: smarter, greener, cheaper ------- */
.sp-oct-power {
background: #ffffff;
}
.sp-oct-power__panel {
background: linear-gradient(160deg, var(--sp-oct-panel) 0%, #1c2065 100%);
border-radius: 28px;
padding: 72px 56px;
color: #ffffff;
box-shadow: 0 40px 90px -50px rgba(15, 15, 55, 0.55);
}
@media (max-width: 767.98px) { .sp-oct-power__panel { padding: 48px 26px; } }
.sp-oct-power__title {
text-align: center;
font-size: clamp(26px, 3vw, 38px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
color: #ffffff;
margin: 0 0 48px;
}
.sp-oct-power__title em {
font-style: normal;
color: var(--sp-oct-cyan);
}
.sp-oct-power__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
@media (max-width: 991.98px) { .sp-oct-power__grid { grid-template-columns: 1fr; gap: 32px; } }
.sp-oct-power__card {
text-align: center;
}
.sp-oct-power__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 68px;
height: 68px;
border-radius: 18px;
font-size: 26px;
color: #ffffff;
margin-bottom: 18px;
box-shadow: 0 18px 32px -20px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.sp-oct-power__icon--coin { background: linear-gradient(180deg, #8a68ff, #5a3ecb); }
.sp-oct-power__icon--house { background: linear-gradient(180deg, #ff9ec7, #d94d90); }
.sp-oct-power__icon--sun { background: linear-gradient(180deg, #ffd25a, #e59a1c); }
.sp-oct-power__card h3 {
font-size: 17px;
font-weight: 700;
color: #ffffff;
letter-spacing: -0.01em;
margin: 0 0 10px;
}
.sp-oct-power__card p {
font-size: 14.5px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.72);
margin: 0 auto;
max-width: 32ch;
}
.sp-oct-power__card strong { color: var(--sp-oct-cyan); }
/* =========================================================
Case Studies — Index grid & Related-cases strip
========================================================= */
/* Index grid on case-studies.php */
.sp-cs-index__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 40px;
}
@media (max-width: 767.98px) { .sp-cs-index__grid { grid-template-columns: 1fr; gap: 18px; } }
.sp-cs-index__card {
position: relative;
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 22px;
overflow: hidden;
color: inherit;
text-decoration: none;
box-shadow: 0 24px 48px -36px rgba(11, 17, 16, 0.18);
transition: transform 0.35s var(--sp-ease-out),
box-shadow 0.35s var(--sp-ease-out),
border-color 0.3s ease;
}
.sp-cs-index__card:hover {
transform: translateY(-4px);
box-shadow: 0 32px 60px -32px rgba(11, 17, 16, 0.25);
border-color: rgba(107, 181, 68, 0.35);
}
.sp-cs-index__card--feature {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1.15fr 1fr;
border-color: rgba(107, 181, 68, 0.3);
}
@media (max-width: 767.98px) {
.sp-cs-index__card--feature { grid-template-columns: 1fr; }
}
.sp-cs-index__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--sp-cream);
}
.sp-cs-index__card--feature .sp-cs-index__media { aspect-ratio: auto; }
.sp-cs-index__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--sp-ease-out);
}
.sp-cs-index__card:hover .sp-cs-index__media img { transform: scale(1.04); }
.sp-cs-index__flag {
position: absolute;
top: 16px;
left: 16px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px 6px 10px;
background: linear-gradient(180deg, var(--sp-green-light) 0%, var(--sp-green) 100%);
color: #ffffff;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: 999px;
box-shadow: 0 10px 22px -10px rgba(11, 17, 16, 0.35);
}
.sp-cs-index__flag i { font-size: 12px; }
.sp-cs-index__body {
padding: 28px 30px 26px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.sp-cs-index__eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sp-green-text);
}
.sp-cs-index__title {
font-size: 22px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--sp-dark);
margin: 0;
}
.sp-cs-index__card--feature .sp-cs-index__title { font-size: 28px; }
.sp-cs-index__lede {
font-size: 14.5px;
line-height: 1.55;
color: var(--sp-muted);
margin: 0;
}
.sp-cs-index__foot {
margin-top: auto;
padding-top: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 12.5px;
color: var(--sp-muted);
border-top: 1px solid var(--sp-border);
}
.sp-cs-index__cta {
font-weight: 700;
color: var(--sp-green-text);
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 0.25s var(--sp-ease-out);
}
.sp-cs-index__card:hover .sp-cs-index__cta { gap: 10px; }
/* Related strip at the bottom of each individual case page */
.sp-cs-related {
background: var(--sp-cream);
}
.sp-cs-related__head {
margin-bottom: 32px;
max-width: 720px;
}
.sp-cs-related__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 991.98px) { .sp-cs-related__grid { grid-template-columns: 1fr; } }
.sp-cs-related__card {
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 18px;
overflow: hidden;
color: inherit;
text-decoration: none;
box-shadow: 0 20px 40px -32px rgba(11, 17, 16, 0.16);
transition: transform 0.35s var(--sp-ease-out),
box-shadow 0.35s var(--sp-ease-out),
border-color 0.3s ease;
}
.sp-cs-related__card:hover {
transform: translateY(-4px);
border-color: rgba(107, 181, 68, 0.35);
box-shadow: 0 28px 48px -30px rgba(11, 17, 16, 0.22);
}
.sp-cs-related__media {
position: relative;
aspect-ratio: 16 / 10;
background: var(--sp-cream);
overflow: hidden;
}
.sp-cs-related__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--sp-ease-out);
}
.sp-cs-related__card:hover .sp-cs-related__media img { transform: scale(1.04); }
.sp-cs-related__flag {
position: absolute;
top: 12px;
left: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px 5px 8px;
background: linear-gradient(180deg, var(--sp-green-light) 0%, var(--sp-green) 100%);
color: #ffffff;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: 999px;
}
.sp-cs-related__body {
padding: 22px 22px 20px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.sp-cs-related__eyebrow {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sp-green-text);
}
.sp-cs-related__title {
font-size: 18px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--sp-dark);
margin: 0;
}
.sp-cs-related__lede {
font-size: 13.5px;
line-height: 1.55;
color: var(--sp-muted);
margin: 0;
}
.sp-cs-related__foot {
margin-top: auto;
padding-top: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 12px;
color: var(--sp-muted);
border-top: 1px solid var(--sp-border);
}
.sp-cs-related__cta {
font-weight: 700;
color: var(--sp-green-text);
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 0.25s var(--sp-ease-out);
}
.sp-cs-related__card:hover .sp-cs-related__cta { gap: 10px; }
/* =========================================================
Case Study — full detail page sections
========================================================= */
/* At-a-glance quick-facts card, sits under hero */
.sp-cs-glance {
padding: 0;
margin-top: -56px;
position: relative;
z-index: 3;
}
.sp-cs-glance__card {
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 22px;
box-shadow: 0 30px 60px -40px rgba(11, 17, 16, 0.22);
display: grid;
grid-template-columns: repeat(6, 1fr);
overflow: hidden;
}
@media (max-width: 991.98px) { .sp-cs-glance__card { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .sp-cs-glance__card { grid-template-columns: repeat(2, 1fr); } }
.sp-cs-glance__cell {
padding: 22px 22px;
border-right: 1px solid var(--sp-border);
display: flex;
flex-direction: column;
gap: 6px;
}
.sp-cs-glance__cell:last-child { border-right: 0; }
@media (max-width: 991.98px) {
.sp-cs-glance__cell:nth-child(3n) { border-right: 0; }
.sp-cs-glance__cell:nth-child(-n+3) { border-bottom: 1px solid var(--sp-border); }
}
@media (max-width: 575.98px) {
.sp-cs-glance__cell:nth-child(2n) { border-right: 0; }
.sp-cs-glance__cell:nth-child(2n+1) { border-right: 1px solid var(--sp-border); }
.sp-cs-glance__cell:nth-last-child(-n+2) { border-bottom: 0; }
.sp-cs-glance__cell { border-bottom: 1px solid var(--sp-border); }
}
.sp-cs-glance__label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sp-muted);
}
.sp-cs-glance__value {
font-family: var(--sp-serif);
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--sp-dark);
line-height: 1.15;
}
.sp-cs-glance__value em {
font-style: normal;
color: var(--sp-green-text);
}
/* Detail narrative sections (challenge / solution / results) */
.sp-cs-detail { padding: 96px 0; }
.sp-cs-detail--cream { background: var(--sp-cream); }
.sp-cs-detail__head {
max-width: 780px;
margin-bottom: 40px;
}
.sp-cs-detail__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sp-green-text);
margin-bottom: 16px;
}
.sp-cs-detail__eyebrow-line {
width: 36px;
height: 1.5px;
background: linear-gradient(90deg, var(--sp-green), transparent);
display: inline-block;
}
.sp-cs-detail__title {
font-size: clamp(28px, 3vw, 40px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--sp-dark);
margin: 0 0 20px;
}
.sp-cs-detail__title em { font-style: normal; color: var(--sp-green-text); }
.sp-cs-detail__grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 48px;
align-items: start;
}
@media (max-width: 991.98px) { .sp-cs-detail__grid { grid-template-columns: 1fr; gap: 32px; } }
.sp-cs-detail__prose p {
font-size: 16px;
line-height: 1.75;
color: var(--sp-text-2);
margin: 0 0 18px;
}
.sp-cs-detail__prose p:last-child { margin-bottom: 0; }
.sp-cs-detail__prose strong { color: var(--sp-dark); }
.sp-cs-detail__aside {
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 18px;
padding: 28px 28px 24px;
box-shadow: 0 20px 40px -32px rgba(11, 17, 16, 0.14);
}
.sp-cs-detail--cream .sp-cs-detail__aside { background: #ffffff; }
.sp-cs-detail__aside-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sp-green-text);
margin-bottom: 16px;
}
.sp-cs-detail__aside-label::before {
content: "";
width: 8px; height: 8px;
background: var(--sp-green);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(107, 181, 68, 0.18);
}
.sp-cs-detail__aside h4 {
font-size: 17px;
font-weight: 700;
color: var(--sp-dark);
margin: 0 0 12px;
letter-spacing: -0.01em;
}
.sp-cs-detail__aside ul {
list-style: none;
margin: 0;
padding: 0;
}
.sp-cs-detail__aside li {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
padding: 10px 0;
border-bottom: 1px solid var(--sp-border);
font-size: 14px;
color: var(--sp-muted);
}
.sp-cs-detail__aside li:last-child { border-bottom: 0; }
.sp-cs-detail__aside li strong {
font-family: var(--sp-serif);
font-weight: 700;
color: var(--sp-dark);
font-size: 15px;
text-align: right;
}
/* Delivery timeline */
.sp-cs-timeline {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
counter-reset: cs;
}
@media (max-width: 991.98px) { .sp-cs-timeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .sp-cs-timeline { grid-template-columns: 1fr; } }
.sp-cs-timeline__step {
position: relative;
padding: 24px 20px 22px;
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 16px;
box-shadow: 0 18px 36px -30px rgba(11, 17, 16, 0.14);
counter-increment: cs;
}
.sp-cs-timeline__step::before {
content: "0" counter(cs);
position: absolute;
top: 16px;
right: 20px;
font-family: var(--sp-serif);
font-weight: 700;
font-size: 30px;
color: rgba(11, 17, 16, 0.08);
letter-spacing: -0.04em;
line-height: 1;
}
.sp-cs-timeline__step small {
display: block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sp-green-text);
margin-bottom: 10px;
}
.sp-cs-timeline__step h4 {
font-size: 16px;
font-weight: 700;
color: var(--sp-dark);
letter-spacing: -0.01em;
margin: 0 0 8px;
}
.sp-cs-timeline__step p {
font-size: 13.5px;
line-height: 1.55;
color: var(--sp-muted);
margin: 0;
}
.sp-cs-timeline__step em {
display: block;
margin-top: 10px;
font-style: normal;
font-size: 12px;
font-weight: 700;
color: var(--sp-green-text);
letter-spacing: 0.02em;
}
/* Products / suppliers used strip */
.sp-cs-products {
background: var(--sp-cream);
}
.sp-cs-products__head { margin-bottom: 32px; max-width: 780px; }
.sp-cs-products__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 991.98px) { .sp-cs-products__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .sp-cs-products__grid { grid-template-columns: 1fr; } }
.sp-cs-products__item {
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 14px;
padding: 18px 20px;
display: flex;
align-items: center;
gap: 14px;
}
.sp-cs-products__item i {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(107, 181, 68, 0.12);
color: var(--sp-green-text);
font-size: 18px;
flex-shrink: 0;
}
.sp-cs-products__item strong {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--sp-dark);
letter-spacing: -0.01em;
}
.sp-cs-products__item span {
display: block;
font-size: 12.5px;
color: var(--sp-muted);
margin-top: 2px;
}
/* Downloads grid */
.sp-cs-downloads__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 32px;
}
@media (max-width: 767.98px) { .sp-cs-downloads__grid { grid-template-columns: 1fr; } }
.sp-cs-downloads__card {
background: #ffffff;
border: 1px solid var(--sp-border);
border-radius: 16px;
padding: 24px 22px;
display: flex;
align-items: flex-start;
gap: 16px;
color: inherit;
text-decoration: none;
transition: transform 0.35s var(--sp-ease-out),
border-color 0.3s ease,
box-shadow 0.35s ease;
}
.sp-cs-downloads__card:hover {
transform: translateY(-3px);
border-color: rgba(107, 181, 68, 0.4);
box-shadow: 0 24px 42px -30px rgba(11, 17, 16, 0.2);
}
.sp-cs-downloads__icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(107, 181, 68, 0.12);
color: var(--sp-green-text);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.sp-cs-downloads__card strong {
display: block;
font-size: 15px;
font-weight: 700;
color: var(--sp-dark);
letter-spacing: -0.01em;
margin-bottom: 4px;
}
.sp-cs-downloads__card span {
display: block;
font-size: 13px;
color: var(--sp-muted);
line-height: 1.5;
}
.sp-cs-downloads__card em {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 8px;
font-style: normal;
font-size: 12px;
font-weight: 700;
color: var(--sp-green-text);
text-transform: uppercase;
letter-spacing: 0.14em;
}