:root { --font-primary: 'Be Vietnam Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-heading: 'Be Vietnam Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --bg-dark: #080a0f; --bg-slate: #0c0f16; --gold-primary: #c5a880; --gold-dark: #9f825b; --gold-light: #e5cfb3;  --text-white: #ffffff;
--text-light: #e5e7eb;
--text-muted: #9ca3af; --border-light: rgba(197, 168, 128, 0.12); --border-strong: rgba(197, 168, 128, 0.25); --radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--container-width: 1200px; --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
--transition-fast: 0.2s ease-out;
--transition-medium: 0.4s var(--ease-expo);
--transition-slow: 0.8s var(--ease-expo);
} * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
background-color: var(--bg-dark);
}
body {
font-family: var(--font-primary);
color: var(--text-light);
line-height: 1.65;
background-color: var(--bg-dark);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
} ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
background: #1f2937;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--gold-primary);
} .bg-grid-overlay {
position: fixed;
inset: 0;
z-index: -3;
background-image: 
linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
background-size: 80px 80px;
pointer-events: none;
} h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--text-white);
font-weight: 500;
line-height: 1.25;
}
h1 {
font-size: clamp(2.5rem, 5vw, 4.2rem);
letter-spacing: -0.01em;
}
h2 {
font-size: clamp(1.8rem, 3.2vw, 2.6rem);
letter-spacing: -0.01em;
}
h3 {
font-size: clamp(1.2rem, 1.8vw, 1.45rem);
}
p {
color: var(--text-muted);
}
a {
color: inherit;
text-decoration: none;
transition: var(--transition-fast);
}
button {
font: inherit;
cursor: pointer;
background: transparent;
border: none;
}
.container {
width: min(100% - 48px, var(--container-width));
margin-inline: auto;
}
.section {
padding: clamp(80px, 10vh, 120px) 0;
position: relative;
border-bottom: 1px solid var(--border-light);
} .section-heading {
margin-bottom: 60px;
}
.section-heading.center {
text-align: center;
max-width: 680px;
margin-inline: auto;
}
.section-heading h2 {
margin-top: 10px;
}
.section-heading.center p:not(.eyebrow) {
margin-top: 16px;
font-size: 0.95rem;
color: var(--text-muted);
}
.section-heading.split {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
}
.section-heading.split div {
max-width: 600px;
} .eyebrow {
color: var(--gold-primary);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 12px;
display: inline-block;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--gold-primary);
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.text-link span {
transition: transform var(--transition-fast);
}
.text-link:hover {
color: var(--gold-light);
}
.text-link:hover span {
transform: translateX(6px);
}
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
} .btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 26px;
border-radius: 0; font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: var(--transition-fast);
}
.btn-primary {
background: var(--gold-primary);
color: var(--bg-dark);
border: 1px solid var(--gold-primary);
}
.btn-primary:hover {
background: var(--gold-light);
border-color: var(--gold-light);
transform: translateY(-2px);
}
.btn-outline {
border: 1px solid var(--border-strong);
color: var(--text-white);
background: transparent;
}
.btn-outline:hover {
background: rgba(197, 168, 128, 0.05);
border-color: var(--gold-primary);
color: var(--gold-primary);
transform: translateY(-2px);
}
.btn-large {
min-height: 54px;
padding: 0 34px;
} .site-header.editorial-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 24px 0;
background: transparent;
border-bottom: 1px solid transparent;
transition: var(--transition-fast);
}
.site-header.scrolled {
padding: 14px 0;
background: rgba(8, 10, 15, 0.95);
border-bottom: 1px solid var(--border-light);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
} .logo {
display: inline-flex;
align-items: center;
gap: 8px;
}
.logo-mark {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 1px solid var(--gold-primary);
color: var(--gold-primary);
font-weight: 500;
font-size: 1.15rem;
font-family: var(--font-heading);
}
.logo-text {
color: var(--text-white);
font-weight: 500;
font-size: 1.15rem;
letter-spacing: -0.01em;
font-family: var(--font-heading);
}
.logo-text strong {
color: var(--gold-primary);
font-weight: 500;
} .main-nav {
display: flex;
align-items: center;
gap: 32px;
}
.main-nav > a,
.mega-trigger {
background: transparent;
color: var(--text-muted);
font-size: 0.85rem;
font-weight: 500;
padding: 4px 0;
letter-spacing: 0.03em;
}
.main-nav > a:hover,
.mega-trigger:hover {
color: var(--gold-primary);
} .nav-item {
position: relative;
}
.mega-trigger {
display: inline-flex;
align-items: center;
gap: 4px;
}
.mega-menu {
position: absolute;
top: calc(100% + 24px);
left: 50%;
transform: translateX(-50%) translateY(10px);
width: min(720px, calc(100vw - 40px));
padding: 24px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
background: var(--bg-slate);
border: 1px solid var(--border-light);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.has-mega:hover .mega-menu {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.mega-col {
padding: 16px;
border-left: 1px solid var(--border-light);
}
.mega-col:first-child {
border-left: none;
}
.mega-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
color: var(--gold-primary);
}
.mega-svg {
width: 18px;
height: 18px;
}
.mega-col h4 {
font-size: 0.95rem;
font-weight: 600;
font-family: var(--font-heading);
}
.mega-col a {
display: block;
padding: 4px 0;
color: var(--text-muted);
font-size: 0.82rem;
}
.mega-col a:hover {
color: var(--text-white);
transform: translateX(3px);
} .header-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: var(--gold-primary);
font-size: 0.82rem;
letter-spacing: 0.06em;
padding: 8px 18px;
border: 1px solid var(--gold-primary);
transition: var(--transition-fast);
}
.header-cta .phone-svg {
width: 14px;
height: 14px;
transition: transform var(--transition-fast);
}
.header-cta:hover {
background: var(--gold-primary);
color: var(--bg-dark);
border-color: var(--gold-primary);
}
.header-cta:hover .phone-svg {
transform: rotate(15deg) scale(1.1);
} .hamburger {
display: none;
width: 40px;
height: 40px;
border: 1px solid var(--border-light);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
}
.hamburger span {
display: block;
width: 18px;
height: 1.5px;
background: var(--text-white);
transition: var(--transition-fast);
} .hero.editorial-hero {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 160px 0 100px;
background: var(--bg-dark);
}
.hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(circle at 100% 0%, rgba(197, 168, 128, 0.04) 0%, transparent 60%);
}
.hero-grid-wrapper {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.hero-content {
max-width: 580px;
}
.hero h1 {
font-size: clamp(2.6rem, 4.5vw, 3.8rem);
font-family: var(--font-heading);
font-weight: 500;
line-height: 1.15;
margin-bottom: 20px;
}
.hero-subtitle {
font-size: 1.05rem;
line-height: 1.65;
color: var(--text-muted);
margin-bottom: 32px;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
} .hero-media-wrapper {
display: flex;
justify-content: flex-end;
}
.hero-image-frame {
position: relative;
width: 100%;
max-width: 480px;
aspect-ratio: 4/5;
background: var(--bg-slate);
border: 1px solid var(--border-light);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
overflow: hidden;
}
.hero-image-frame img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
filter: grayscale(0.2) contrast(1.1);
}
.image-mask {
position: absolute;
inset: 0;
background: linear-gradient(30deg, var(--bg-dark) 5%, transparent 60%);
pointer-events: none;
} .hero-stats-bar {
position: relative;
z-index: 3;
margin-top: 80px;
border-top: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
padding: 30px 0;
}
.stats-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.stat-item {
text-align: center;
flex: 1;
}
.stat-item strong {
display: block;
font-size: clamp(2.4rem, 3.5vw, 3.2rem);
font-weight: 700;
font-family: var(--font-primary);
color: var(--gold-primary);
line-height: 1;
margin-bottom: 8px;
}
.stat-item > span {
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
display: block;
}
.stat-divider {
width: 1px;
height: 40px;
background: var(--border-light);
} .about {
background: var(--bg-dark);
}
.about-copy h2 {
margin-bottom: 20px;
}
.about-desc {
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 30px;
}
.commit-list {
list-style: none;
display: grid;
gap: 16px;
margin-bottom: 32px;
}
.commit-list li {
position: relative;
padding-left: 28px;
font-size: 0.9rem;
color: var(--text-light);
font-weight: 400;
}
.check-svg {
position: absolute;
left: 0;
top: 3px;
width: 16px;
height: 16px;
color: var(--gold-primary);
}
.about-media-wrapper {
position: relative;
}
.about-image-frame {
position: relative;
width: 100%;
border: 1px solid var(--border-light);
background: var(--bg-slate);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
.about-image-frame img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
opacity: 0.8;
}
.about-image-frame::before {
content: "";
position: absolute;
inset: -14px;
border: 1px solid var(--border-strong);
z-index: -1;
pointer-events: none;
transform: translate(6px, 6px);
}
.floating-badge {
position: absolute;
bottom: -20px;
left: -20px;
padding: 20px 24px;
background: var(--bg-slate);
border: 1px solid var(--border-strong);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.floating-badge strong {
display: block;
color: var(--gold-primary);
font-size: 1.25rem;
font-family: var(--font-heading);
font-weight: 500;
margin-bottom: 4px;
}
.floating-badge span {
font-size: 0.8rem;
color: var(--text-muted);
} .services {
background: var(--bg-slate);
}
.service-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.service-card {
padding: 44px 36px;
background: var(--bg-dark);
border: 1px solid var(--border-light);
transition: var(--transition-medium);
}
.service-card:hover {
transform: translateY(-5px);
border-color: var(--gold-primary);
box-shadow: 0 15px 35px rgba(197, 168, 128, 0.05);
}
.service-icon-wrapper {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
margin-bottom: 28px;
transition: var(--transition-fast);
}
.service-svg {
width: 24px;
height: 24px;
}
.service-card:hover .service-icon-wrapper {
background: var(--gold-primary);
color: var(--bg-dark);
}
.service-card h3 {
font-size: 1.35rem;
font-weight: 500;
margin-bottom: 16px;
}
.service-card p {
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 24px;
min-height: 72px;
}
.service-card a {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--gold-primary);
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.service-card a span {
transition: transform var(--transition-fast);
}
.service-card:hover a span {
transform: translateX(4px);
} .values {
background: var(--bg-dark);
}
.values-list-wrapper {
display: flex;
flex-direction: column;
max-width: 900px;
margin-inline: auto;
}
.value-row {
display: flex;
align-items: flex-start;
gap: 40px;
padding: 30px 0;
border-bottom: 1px solid var(--border-light);
transition: var(--transition-fast);
}
.value-row:first-child {
border-top: 1px solid var(--border-light);
}
.value-number {
font-family: var(--font-heading);
font-size: 2rem;
color: var(--gold-primary);
line-height: 1;
flex-shrink: 0;
width: 60px;
}
.value-content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 30px;
flex-grow: 1;
}
.value-content h3 {
font-size: 1.25rem;
font-weight: 500;
}
.value-content p {
font-size: 0.9rem;
line-height: 1.55;
color: var(--text-muted);
}
.value-row:hover {
background: rgba(197, 168, 128, 0.015);
padding-left: 20px;
} .process {
background: var(--bg-slate);
}
.process-interactive-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
position: relative;
margin-top: 40px;
}
.process-steps-list {
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
}
.timeline-trail-line {
position: absolute;
left: 21px;
top: 20px;
bottom: 20px;
width: 1px;
background: var(--border-light);
z-index: 1;
} .process-step-item {
display: flex;
align-items: center;
gap: 18px;
padding: 12px;
border-left: 1px solid transparent;
transition: var(--transition-medium);
cursor: pointer;
position: relative;
z-index: 2;
}
.step-num {
flex-shrink: 0;
width: 18px;
height: 18px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--bg-slate);
border: 1px solid var(--border-strong);
color: var(--text-muted);
font-size: 0.62rem;
font-weight: 700;
transition: var(--transition-fast);
}
.step-content h3 {
font-size: 0.95rem;
font-weight: 500;
color: var(--text-muted);
margin-bottom: 2px;
transition: var(--transition-fast);
}
.step-content p {
font-size: 0.8rem;
line-height: 1.4;
transition: var(--transition-fast);
} .process-step-item.active {
background: var(--bg-dark);
padding-left: 20px;
border-left: 2px solid var(--gold-primary);
}
.process-step-item.active .step-num {
background: var(--gold-primary);
border-color: var(--gold-primary);
color: var(--bg-dark);
}
.process-step-item.active .step-content h3 {
color: var(--text-white);
}
.process-step-item.active .step-content p {
color: var(--text-light);
} .process-preview-panel {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
padding: 48px;
border: 1px solid var(--border-light);
background: 
linear-gradient(rgba(8, 10, 15, 0.93), rgba(8, 10, 15, 0.93)),
url(https://spmc.vn/wp-content/uploads/2026/07/trang-chu-quy-trinh-lam-viec.avif) center/cover no-repeat;
text-align: center;
position: relative;
min-height: 380px;
overflow: hidden;
}
.preview-item {
display: none;
opacity: 0;
transform: translateY(10px);
transition: opacity var(--transition-medium), transform var(--transition-medium);
}
.preview-item.show {
display: block;
opacity: 1;
transform: translateY(0);
}
.preview-icon-wrapper {
width: 64px;
height: 64px;
display: grid;
place-items: center;
border: 1px solid var(--border-light);
color: var(--gold-primary);
margin: 0 auto 24px;
}
.preview-svg {
width: 28px;
height: 28px;
}
.process-preview-panel h4 {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 12px;
color: var(--text-white);
}
.process-preview-panel p {
font-size: 0.88rem;
line-height: 1.6;
color: var(--text-muted);
} .partners {
padding-bottom: 60px;
border-bottom: none;
}
.logo-carousel {
width: 100%;
overflow: hidden;
border-block: 1px solid var(--border-light);
background: rgba(255, 255, 255, 0.005);
}
.logo-track {
width: max-content;
display: flex;
align-items: center;
gap: 80px;
padding: 24px 40px;
animation: logoMove 30s linear infinite;
}
.logo-track span {
color: var(--text-muted);
font-size: 1.25rem;
font-weight: 500;
font-family: var(--font-heading);
letter-spacing: -0.01em;
opacity: 0.35;
transition: var(--transition-fast);
}
.logo-track span:hover {
color: var(--gold-primary);
opacity: 0.95;
transform: scale(1.03);
}
@keyframes logoMove {
from { transform: translateX(0); }
to { transform: translateX(-25%); }
} .news {
background: var(--bg-dark);
}
.news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.news-card {
overflow: hidden;
border: 1px solid var(--border-light);
background: var(--bg-slate);
transition: var(--transition-medium);
}
.news-card:hover {
transform: translateY(-4px);
border-color: var(--gold-primary);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}
.news-image {
height: 200px;
overflow: hidden;
border-bottom: 1px solid var(--border-light);
}
.news-image img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
transition: transform var(--transition-slow);
}
.news-card:hover .news-image img {
transform: scale(1.05);
}
.news-body {
padding: 24px;
}
.tag {
display: inline-flex;
padding: 3px 10px;
margin-bottom: 12px;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.news-body time {
display: block;
color: var(--text-muted);
font-size: 0.78rem;
margin-bottom: 8px;
}
.news-body h3 {
min-height: 52px;
margin-bottom: 18px;
font-size: 1.05rem;
line-height: 1.35;
font-weight: 500;
}
.news-body a {
color: var(--gold-primary);
font-weight: 600;
font-size: 0.8rem;
display: inline-flex;
align-items: center;
gap: 4px;
}
.news-body a span {
transition: transform var(--transition-fast);
}
.news-card:hover .news-body a span {
transform: translateX(4px);
} .final-cta {
background: var(--bg-slate);
}
.cta-capsule {
display: flex;
align-items: center;
justify-content: space-between;
gap: 36px;
padding: 48px 60px;
border: 1px solid var(--border-strong);
background: var(--bg-dark);
}
.cta-capsule h2 {
max-width: 580px;
line-height: 1.3;
} .site-footer {
padding: 80px 0 0;
background: #05060a;
border-top: 1px solid var(--border-light);
color: var(--text-muted);
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 0.8fr 0.8fr 0.8fr 1.2fr;
gap: 36px;
}
.footer-grid h3 {
margin-bottom: 20px;
color: var(--text-white);
font-size: 0.95rem;
font-weight: 600;
}
.footer-grid a:not(.logo) {
display: block;
margin-bottom: 10px;
color: var(--text-muted);
font-size: 0.85rem;
}
.footer-grid a:not(.logo):hover {
color: var(--gold-primary);
transform: translateX(3px);
}
.footer-brand p {
margin-top: 16px;
font-size: 0.82rem;
line-height: 1.6;
max-width: 300px;
}
.socials {
display: flex;
gap: 10px;
margin-top: 24px;
}
.socials a {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border: 1px solid var(--border-light);
color: var(--text-white);
font-size: 0.8rem;
transition: var(--transition-fast);
}
.socials a:hover {
color: #030712;
transform: translateY(-2px);
}
.socials a:nth-child(1):hover { background: #1877f2; border-color: #1877f2; }
.socials a:nth-child(2):hover { background: #0a66c2; border-color: #0a66c2; }
.socials a:nth-child(3):hover { background: #0068ff; border-color: #0068ff; }
.socials a:nth-child(4):hover { background: #ff0000; border-color: #ff0000; }
.footer-grid p {
font-size: 0.82rem;
margin-bottom: 6px;
}
.footer-grid strong {
color: var(--text-white);
}
.qr {
width: 88px;
margin-top: 16px;
border: 1px solid var(--border-light);
padding: 4px;
background: var(--text-white);
}
.footer-bottom {
margin-top: 70px;
padding: 24px;
text-align: center;
color: rgba(255, 255, 255, 0.2);
font-size: 0.78rem;
border-top: 1px solid var(--border-light);
} @media (max-width: 1120px) {
.header-cta {
display: none;
}
.hero-grid-wrapper {
grid-template-columns: 1fr;
gap: 40px;
}
.hero-media-wrapper {
justify-content: center;
}
.hero-image-frame {
max-width: 500px;
aspect-ratio: 16/9;
}
.service-grid,
.news-grid {
grid-template-columns: repeat(2, 1fr);
}
.process-interactive-wrapper {
grid-template-columns: 1fr;
gap: 36px;
}
.process-preview-panel {
min-height: auto;
padding: 30px;
}
.footer-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 860px) {
.section {
padding: clamp(60px, 8vh, 90px) 0;
}
.hamburger {
display: flex;
z-index: 1002;
}
.hamburger.is-active span:nth-child(1) {
transform: translateY(5.5px) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
}
.hamburger.is-active span:nth-child(3) {
transform: translateY(-5.5px) rotate(-45deg);
}
.main-nav {
position: fixed;
inset: 0 0 auto;
z-index: 1001;
min-height: 100vh;
padding: 96px 24px 32px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
background: rgba(8, 10, 15, 0.98);
transform: translateX(100%);
transition: transform 0.35s ease-out;
border-left: 1px solid var(--border-light);
}
.main-nav.is-open {
transform: translateX(0);
}
.main-nav > a,
.mega-trigger {
width: 100%;
padding: 16px 0;
font-size: 1rem;
text-align: left;
border-bottom: 1px solid var(--border-light);
}
.mega-menu {
position: static;
width: 100%;
display: none;
grid-template-columns: 1fr;
padding: 10px 0 16px;
background: transparent;
border: none;
box-shadow: none;
transform: none;
opacity: 1;
pointer-events: auto;
}
.has-mega.is-open .mega-menu {
display: grid;
}
.hero.editorial-hero {
padding: 120px 0 60px;
}
.stats-row {
flex-wrap: wrap;
gap: 20px;
}
.stat-item {
flex: 1 1 40%;
}
.stat-divider {
display: none;
}
.two-col {
grid-template-columns: 1fr;
gap: 40px;
}
.about-image-frame img {
min-height: 300px;
}
.cta-capsule {
flex-direction: column;
align-items: flex-start;
padding: 30px;
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 620px) {
.container {
width: min(100% - 24px, var(--container-width));
}
.logo-text {
display: none;
}
.hero-actions,
.btn {
width: 100%;
}
.stat-item {
flex: 1 1 100%;
}
.value-content {
grid-template-columns: 1fr;
gap: 8px;
}
.service-grid,
.process-timeline,
.news-grid,
.footer-grid {
grid-template-columns: 1fr;
}
.floating-badge {
left: 14px;
right: 14px;
bottom: 14px;
max-width: none;
}
.modal-panel {
padding: 24px 20px;
}
} .modal {
position: fixed;
inset: 0;
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
}
.modal.is-open {
display: flex;
}
.modal-backdrop {
position: absolute;
inset: 0;
background: rgba(2, 4, 12, 0.8);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.modal-panel {
position: relative;
width: min(100%, 480px);
padding: 40px 32px;
background: var(--bg-slate);
border: 1px solid var(--border-strong);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
animation: modalIn 0.3s ease-out;
z-index: 2002;
}
@keyframes modalIn {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
border: 1px solid var(--border-light);
color: var(--text-white);
font-size: 1.25rem;
display: grid;
place-items: center;
cursor: pointer;
transition: var(--transition-fast);
}
.modal-close:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--gold-primary);
}
.modal-desc {
margin: 12px 0 24px;
font-size: 0.85rem;
line-height: 1.55;
}
.consult-form {
display: grid;
gap: 16px;
}
.consult-form label {
display: grid;
gap: 6px;
color: var(--text-white);
font-size: 0.82rem;
font-weight: 500;
}
.consult-form input,
.consult-form select {
width: 100%;
min-height: 44px;
padding: 0 14px;
border: 1px solid var(--border-light);
outline: none;
background: var(--bg-dark);
color: var(--text-white);
transition: var(--transition-fast);
}
.consult-form select option {
background-color: var(--bg-slate);
color: var(--text-white);
}
.consult-form input::placeholder {
color: rgba(255, 255, 255, 0.2);
}
.consult-form input:focus,
.consult-form select:focus {
border-color: var(--gold-primary);
background: rgba(255, 255, 255, 0.01);
}
.form-message {
min-height: 20px;
color: var(--gold-primary);
font-weight: 600;
font-size: 0.82rem;
text-align: center;
} .reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.8s var(--ease-expo), transform 0.8s var(--ease-expo);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
} :root {
--spmc-admin-bar-height: 0px;
--spmc-header-height: 82px;
}
body.admin-bar .site-header.editorial-header {
top: var(--spmc-admin-bar-height, 32px);
}
body.admin-bar .modal,
body.admin-bar .search-overlay {
padding-top: var(--spmc-admin-bar-height, 32px);
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.skip-link:focus {
clip: auto !important;
clip-path: none;
display: block;
height: auto;
left: 16px;
top: calc(var(--spmc-admin-bar-height, 0px) + 16px);
width: auto;
z-index: 10000;
padding: 10px 14px;
background: var(--gold-primary);
color: var(--bg-dark);
}
.logo {
min-width: 0;
}
.logo-image img {
display: block;
max-height: 44px;
width: auto;
}
.logo-stack {
display: grid;
gap: 0;
min-width: 0;
}
.logo-subtitle {
display: block;
color: var(--text-muted);
font-size: 0.62rem;
line-height: 1.1;
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
}
.header-actions {
display: inline-flex;
align-items: center;
gap: 12px;
}
.header-search-toggle {
width: 40px;
height: 40px;
display: inline-grid;
place-items: center;
color: var(--text-white);
border: 1px solid var(--border-light);
transition: var(--transition-fast);
}
.header-search-toggle:hover,
.header-search-toggle:focus-visible {
color: var(--bg-dark);
background: var(--gold-primary);
border-color: var(--gold-primary);
outline: none;
}
.search-svg {
width: 18px;
height: 18px;
}
.main-nav .primary-menu,
.main-nav .primary-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.main-nav .primary-menu {
display: flex;
align-items: center;
gap: 32px;
}
.main-nav .primary-menu > li {
position: relative;
}
.main-nav .primary-menu a {
display: inline-flex;
align-items: center;
color: var(--text-muted);
font-size: 0.85rem;
font-weight: 500;
padding: 4px 0;
letter-spacing: 0.03em;
}
.main-nav .primary-menu a:hover,
.main-nav .primary-menu a:focus-visible,
.main-nav .primary-menu .current-menu-item > a,
.main-nav .primary-menu .current_page_item > a {
color: var(--gold-primary);
outline: none;
}
.main-nav .primary-menu .sub-menu {
position: absolute;
top: calc(100% + 20px);
left: 0;
min-width: 220px;
padding: 16px;
background: var(--bg-slate);
border: 1px solid var(--border-light);
box-shadow: 0 15px 40px rgba(0,0,0,.45);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: var(--transition-fast);
}
.main-nav .primary-menu li:hover > .sub-menu,
.main-nav .primary-menu li:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.main-nav .primary-menu .sub-menu a {
display: block;
padding: 7px 0;
}
.search-overlay {
position: fixed;
inset: 0;
z-index: 2100;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.search-overlay.is-open {
display: flex;
}
.search-overlay-backdrop {
position: absolute;
inset: 0;
background: rgba(2, 4, 12, 0.86);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.search-overlay-panel {
position: relative;
z-index: 2;
width: min(100%, 680px);
padding: 42px;
background: var(--bg-slate);
border: 1px solid var(--border-strong);
box-shadow: 0 25px 60px rgba(0,0,0,.72);
}
.search-overlay-close {
position: absolute;
top: 14px;
right: 14px;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 1px solid var(--border-light);
color: var(--text-white);
font-size: 1.35rem;
}
.search-form,
.wp-block-search,
.spmc-search-form {
display: flex;
gap: 10px;
align-items: stretch;
}
.search-field,
.search-form input[type="search"],
.wp-block-search__input,
.spmc-search-form input[type="search"] {
width: 100%;
min-height: 52px;
padding: 0 16px;
border: 1px solid var(--border-light);
background: var(--bg-dark);
color: var(--text-white);
outline: none;
transition: var(--transition-fast);
}
.search-field:focus,
.search-form input[type="search"]:focus,
.wp-block-search__input:focus,
.spmc-search-form input[type="search"]:focus {
border-color: var(--gold-primary);
box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.08);
}
.search-submit,
.wp-block-search__button,
.spmc-search-form button {
min-height: 52px;
padding: 0 22px;
border: 1px solid var(--gold-primary);
background: var(--gold-primary);
color: var(--bg-dark);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
}
.spmc-inner-page {
padding: calc(var(--spmc-header-height, 82px) + 64px) 0 96px;
background: var(--bg-dark);
min-height: 70vh;
}
.page-hero,
.archive-hero,
.search-hero,
.error-hero {
max-width: 860px;
margin: 0 auto 42px;
text-align: center;
}
.page-hero h1,
.archive-hero h1,
.search-hero h1,
.error-hero h1 {
margin-top: 10px;
}
.spmc-breadcrumb {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-bottom: 18px;
color: var(--text-muted);
font-size: 0.8rem;
}
.spmc-breadcrumb a {
color: var(--gold-primary);
}
.spmc-breadcrumb .separator {
color: rgba(255,255,255,.25);
}
.page-content,
.article-content,
.archive-description,
.search-description,
.error-description {
color: var(--text-light);
}
.page-content {
max-width: 860px;
margin-inline: auto;
}
.page-content > * + *,
.article-content > * + * {
margin-top: 1.1em;
}
.page-content h2,
.page-content h3,
.article-content h2,
.article-content h3,
.article-content h4 {
margin-top: 1.65em;
}
.page-content p,
.article-content p,
.article-content li,
.page-content li {
color: var(--text-light);
}
.article-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 56px;
align-items: start;
}
.article-main {
min-width: 0;
}
.article-header {
max-width: 860px;
margin-bottom: 24px;
}
.article-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
color: var(--text-muted);
font-size: 0.86rem;
margin-top: 14px;
}
.article-featured {
margin: 26px 0 28px;
border: 1px solid var(--border-light);
background: var(--bg-slate);
}
.article-featured img {
display: block;
width: 100%;
height: auto;
}
.article-content {
max-width: 860px;
font-size: 1.02rem;
line-height: 1.78;
}
.article-content ul,
.article-content ol,
.page-content ul,
.page-content ol {
padding-left: 1.25em;
}
.article-content li::marker,
.page-content li::marker {
color: var(--gold-primary);
}
.article-content img,
.page-content img {
max-width: 100%;
height: auto;
border: 1px solid var(--border-light);
}
.article-content a,
.page-content a {
color: var(--gold-primary);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.article-sidebar {
position: sticky;
top: calc(var(--spmc-admin-bar-height, 0px) + var(--spmc-header-height, 82px) + 28px);
}
.article-toc {
padding: 24px;
border: 1px solid var(--border-light);
background: var(--bg-slate);
}
.article-toc.is-hidden {
display: none;
}
.article-toc-title {
display: block;
color: var(--gold-primary);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 12px;
}
.article-toc-list {
display: grid;
gap: 10px;
}
.article-toc-list a {
color: var(--text-muted);
font-size: 0.88rem;
line-height: 1.4;
}
.article-toc-list a:hover,
.article-toc-list a.is-active {
color: var(--gold-primary);
}
.archive-grid,
.news-grid.search-results-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.post-card {
display: flex;
flex-direction: column;
min-height: 100%;
}
.post-card .news-image a,
.post-card .news-image img {
display: block;
}
.post-card .news-body p {
font-size: 0.9rem;
margin-top: 10px;
}
.post-card .post-meta-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-bottom: 10px;
}
.post-card .tag {
max-width: 100%;
}
.pagination-wrapper {
margin-top: 46px;
display: flex;
justify-content: center;
}
.page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 14px;
margin: 0 4px;
border: 1px solid var(--border-light);
color: var(--text-muted);
}
.page-numbers.current,
.page-numbers:hover,
.page-numbers:focus-visible {
background: var(--gold-primary);
color: var(--bg-dark);
border-color: var(--gold-primary);
outline: none;
}
.no-results-box,
.error-card {
max-width: 760px;
margin: 0 auto;
padding: 36px;
border: 1px solid var(--border-light);
background: var(--bg-slate);
}
.error-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
margin: 28px 0;
}
.quick-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 24px;
}
.quick-links a {
border: 1px solid var(--border-light);
padding: 9px 14px;
color: var(--text-muted);
}
.quick-links a:hover {
border-color: var(--gold-primary);
color: var(--gold-primary);
}
.site-footer .footer-builder {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 34px;
align-items: start;
}
.site-footer .footer-builder:empty {
display: none;
}
.site-footer .widget,
.site-footer .wp-block-group,
.site-footer .wp-block-column {
margin: 0;
}
.site-footer .widget-title,
.site-footer h2,
.site-footer h3,
.site-footer h4 {
font-size: 1rem;
margin: 0 0 12px;
}
.site-footer p,
.site-footer li {
font-size: 0.86rem;
color: var(--text-muted);
margin: 0 0 8px;
}
.site-footer ul,
.site-footer ol {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer a {
display: inline-flex;
}
.site-footer .wp-block-columns {
margin-bottom: 0;
gap: 32px;
}
.spmc-form-shell .ff-el-group,
.spmc-form-shell .fluentform .ff-el-group {
margin-bottom: 16px;
}
.spmc-form-shell .fluentform label,
.spmc-form-shell .ff-el-input--label label {
color: var(--text-white);
font-size: 0.82rem;
font-weight: 500;
}
.spmc-form-shell .fluentform input,
.spmc-form-shell .fluentform select,
.spmc-form-shell .fluentform textarea {
border: 1px solid var(--border-light) !important;
background: var(--bg-dark) !important;
color: var(--text-white) !important;
border-radius: 0 !important;
min-height: 44px;
}
.spmc-form-shell .fluentform select option {
background: var(--bg-slate);
color: var(--text-white);
}
.spmc-form-shell .fluentform input:focus,
.spmc-form-shell .fluentform select:focus,
.spmc-form-shell .fluentform textarea:focus {
border-color: var(--gold-primary) !important;
box-shadow: 0 0 0 3px rgba(197,168,128,.08) !important;
}
.spmc-form-shell .ff-btn-submit,
.spmc-form-shell .fluentform button[type="submit"] {
border-radius: 0 !important;
background: var(--gold-primary) !important;
color: var(--bg-dark) !important;
border: 1px solid var(--gold-primary) !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: .06em;
}
.spmc-admin-form-note {
padding: 14px;
border: 1px solid var(--border-strong);
color: var(--gold-light);
background: rgba(197,168,128,.06);
font-size: .88rem;
}
@media (max-width: 1120px) {
.archive-grid,
.news-grid.search-results-grid {
grid-template-columns: repeat(2, 1fr);
}
.article-layout {
grid-template-columns: 1fr;
}
.article-sidebar {
position: static;
order: -1;
}
}
@media (max-width: 860px) {
.header-actions {
margin-left: auto;
}
.site-header.editorial-header .header-inner {
gap: 12px;
}
.main-nav {
top: var(--spmc-admin-bar-height, 0px);
left: auto;
width: min(92vw, 390px);
min-height: calc(100vh - var(--spmc-admin-bar-height, 0px));
height: calc(100dvh - var(--spmc-admin-bar-height, 0px));
overflow-y: auto;
}
.main-nav .primary-menu {
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 0;
}
.main-nav .primary-menu a {
width: 100%;
padding: 16px 0;
font-size: 1rem;
border-bottom: 1px solid var(--border-light);
}
.main-nav .primary-menu .sub-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
padding: 0 0 10px 18px;
border: 0;
box-shadow: none;
background: transparent;
}
.header-cta span {
display: none;
}
.header-cta {
width: 40px;
height: 40px;
padding: 0;
justify-content: center;
}
.hamburger {
min-width: 44px;
min-height: 44px;
}
.site-footer .wp-block-columns {
flex-wrap: wrap !important;
}
}
@media (max-width: 620px) {
.archive-grid,
.news-grid.search-results-grid {
grid-template-columns: 1fr;
}
.search-form,
.wp-block-search,
.spmc-search-form {
flex-direction: column;
}
.search-overlay-panel,
.no-results-box,
.error-card {
padding: 26px 20px;
}
.spmc-inner-page {
padding-top: calc(var(--spmc-header-height, 78px) + 40px);
}
}
.footer-bottom-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
}
.footer-bottom-menu {
display: flex;
gap: 14px;
list-style: none;
margin: 0;
padding: 0;
}
.footer-bottom-menu a {
color: rgba(255, 255, 255, 0.35);
}
.footer-bottom-menu a:hover {
color: var(--gold-primary);
} .site-header.editorial-header .header-inner {
gap: clamp(14px, 2vw, 30px);
}
.site-header.editorial-header .logo {
flex: 0 0 auto;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 4px;
max-width: 178px;
min-width: 118px;
line-height: 1;
}
.site-header.editorial-header .logo-mark {
width: 34px;
height: 34px;
flex: 0 0 34px;
}
.site-header.editorial-header .logo-image,
.site-header.editorial-header .logo-image img {
display: block;
}
.site-header.editorial-header .logo-image img {
max-width: 150px;
max-height: 38px;
width: auto;
height: auto;
object-fit: contain;
}
.site-header.editorial-header .logo-stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
max-width: 100%;
min-width: 0;
}
.site-header.editorial-header .logo-text {
display: block;
max-width: 100%;
color: var(--text-white);
font-size: clamp(0.98rem, 1.2vw, 1.12rem);
line-height: 1.05;
white-space: normal;
overflow-wrap: anywhere;
}
.site-header.editorial-header .logo-subtitle {
max-width: 100%;
color: var(--text-muted);
font-size: 0.58rem;
line-height: 1.18;
letter-spacing: 0.1em;
white-space: normal;
}
.header-actions {
flex: 0 0 auto;
}
.header-search-toggle {
position: relative;
flex: 0 0 44px;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
padding: 0;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-white);
border: 1px solid var(--border-light);
background: transparent;
overflow: visible;
}
.header-search-toggle .search-svg,
.header-search-toggle svg {
display: block;
width: 18px;
height: 18px;
flex: 0 0 18px;
stroke: currentColor;
fill: none;
pointer-events: none;
}
.header-search-toggle:hover .search-svg,
.header-search-toggle:focus-visible .search-svg {
stroke: currentColor;
}
@media (max-width: 1120px) {
.site-header.editorial-header .logo {
max-width: 158px;
}
.site-header.editorial-header .logo-subtitle {
font-size: 0.54rem;
letter-spacing: 0.08em;
}
}
@media (max-width: 860px) {
.site-header.editorial-header .header-inner {
align-items: center;
}
.site-header.editorial-header .logo {
max-width: 134px;
min-width: 96px;
}
.header-search-toggle,
.header-cta,
.hamburger {
flex: 0 0 44px;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
}
}
@media (max-width: 620px) {
.site-header.editorial-header .logo-text {
display: block;
font-size: 0.92rem;
}
.site-header.editorial-header .logo-subtitle {
display: none;
}
.site-header.editorial-header .logo-mark {
width: 30px;
height: 30px;
flex-basis: 30px;
}
} .blog-catalog-page,
.single-post-page.article-detail-section {
background: var(--bg-dark);
}
.category-hero {
background: var(--bg-dark);
padding: calc(var(--spmc-header-height, 82px) + 58px) 0 60px;
border-bottom: 1px solid var(--border-light);
text-align: center;
}
.category-hero .spmc-breadcrumb,
.article-hero .spmc-breadcrumb {
margin-bottom: 18px;
}
.category-hero p.eyebrow {
margin-bottom: 16px;
}
.category-hero h1 {
font-size: clamp(2.2rem, 4vw, 3.2rem);
margin-bottom: 16px;
}
.category-hero-desc {
max-width: 680px;
margin-inline: auto;
font-size: 1rem;
color: var(--text-muted);
}
.category-hero-desc p {
margin: 0;
}
.news-page-container {
background: var(--bg-dark);
}
.news-layout-wrapper,
.article-layout-wrapper {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 50px;
align-items: start;
}
.news-list-area {
display: flex;
flex-direction: column;
gap: 50px;
min-width: 0;
}
.articles-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px;
}
.news-card .post-excerpt {
font-size: 0.88rem;
color: var(--text-muted);
line-height: 1.6;
margin: 0 0 18px;
min-height: 64px;
}
.read-more-link {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--gold-primary);
display: inline-flex;
align-items: center;
gap: 6px;
}
.read-more-link span {
transition: transform var(--transition-fast);
}
.news-card:hover .read-more-link span {
transform: translateX(4px);
}
.pagination-wrapper {
justify-content: flex-start;
align-items: center;
gap: 10px;
margin-top: 20px;
padding-top: 30px;
border-top: 1px solid var(--border-light);
}
.pagination-wrapper .nav-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.pagination-wrapper .page-numbers {
margin: 0;
}
.news-sidebar,
.article-sidebar {
display: flex;
flex-direction: column;
gap: 40px;
position: sticky;
top: calc(var(--spmc-admin-bar-height, 0px) + var(--spmc-header-height, 82px) + 22px);
}
.sidebar-widget {
padding: 30px 24px;
background: var(--bg-slate);
border: 1px solid var(--border-light);
}
.sidebar-widget .widget-title {
font-size: 1.05rem;
font-weight: 600;
color: var(--text-white);
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-light);
letter-spacing: 0.02em;
}
.news-sidebar .search-form {
display: flex;
position: relative;
}
.news-sidebar .search-form input[type="search"] {
width: 100%;
height: 42px;
min-height: 42px;
padding: 0 46px 0 16px;
background: var(--bg-dark);
border: 1px solid var(--border-light);
color: var(--text-white);
font-size: 0.85rem;
outline: none;
transition: var(--transition-fast);
}
.news-sidebar .search-form input[type="search"]:focus {
border-color: var(--gold-primary);
}
.news-sidebar .search-form button[type="submit"] {
position: absolute;
right: 0;
top: 0;
width: 42px;
height: 42px;
min-width: 42px;
min-height: 42px;
padding: 0;
display: grid;
place-items: center;
color: var(--text-muted);
background: transparent;
border: 0;
transition: var(--transition-fast);
}
.news-sidebar .search-form button[type="submit"]:hover,
.news-sidebar .search-form button[type="submit"]:focus-visible {
color: var(--gold-primary);
outline: none;
}
.search-svg {
width: 16px;
height: 16px;
display: block;
}
.widget-categories,
.widget-popular-posts,
.widget-related-posts {
list-style: none;
margin: 0;
padding: 0;
}
.widget-categories {
display: flex;
flex-direction: column;
gap: 12px;
}
.widget-categories a {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
color: var(--text-muted);
font-size: 0.88rem;
font-weight: 400;
}
.widget-categories a span {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.2);
}
.widget-categories a.active,
.widget-categories a:hover,
.widget-categories a.active span,
.widget-categories a:hover span {
color: var(--gold-primary);
}
.widget-popular-posts,
.widget-related-posts {
display: flex;
flex-direction: column;
gap: 18px;
}
.widget-popular-posts li,
.widget-related-posts li {
display: flex;
flex-direction: column;
gap: 4px;
}
.widget-popular-posts time,
.widget-related-posts strong {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--gold-primary);
font-weight: 600;
}
.widget-popular-posts h5,
.widget-related-posts span {
font-size: 0.88rem;
font-weight: 500;
line-height: 1.35;
font-family: var(--font-heading);
color: var(--text-light);
transition: var(--transition-fast);
}
.widget-popular-posts h5 {
margin: 0;
}
.widget-popular-posts h5:hover,
.widget-related-posts a:hover span {
color: var(--gold-primary);
}
.newsletter-desc {
font-size: 0.82rem;
line-height: 1.5;
color: var(--text-muted);
margin-bottom: 18px;
}
.newsletter-widget .btn,
.contact-cta-widget .btn {
width: 100%;
}
.article-detail {
background: var(--bg-dark);
}
.article-hero {
background: var(--bg-dark);
padding: calc(var(--spmc-header-height, 82px) + 78px) 0 60px;
border-bottom: 1px solid var(--border-light);
}
.article-hero .tag {
margin-bottom: 20px;
}
.article-title {
font-size: clamp(2rem, 4.5vw, 3.4rem);
font-weight: 500;
line-height: 1.2;
margin-bottom: 28px;
max-width: 900px;
}
.article-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px;
font-size: 0.85rem;
color: var(--text-muted);
margin-top: 0;
}
.author-info {
display: flex;
align-items: center;
gap: 12px;
}
.author-avatar,
.card-avatar {
border-radius: 50%;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
font-weight: 700;
display: grid;
place-items: center;
}
.author-avatar {
width: 38px;
height: 38px;
background: var(--bg-slate);
font-size: 0.68rem;
}
.author-name {
display: block;
color: var(--text-white);
font-weight: 500;
}
.meta-sub {
display: block;
font-size: 0.72rem;
color: var(--text-muted);
}
.meta-divider {
width: 1px;
height: 16px;
background: var(--border-light);
}
.article-body-container {
background: var(--bg-dark);
}
.article-rich-text.article-content {
max-width: 780px;
font-size: 1rem;
line-height: 1.7;
}
.article-rich-text .lead,
.article-rich-text > p:first-of-type {
font-size: 1.15rem;
line-height: 1.7;
color: var(--text-light);
margin-bottom: 28px;
font-weight: 300;
}
.article-rich-text p {
font-size: 0.96rem;
line-height: 1.7;
color: var(--text-muted);
margin-bottom: 24px;
}
.article-rich-text h2 {
font-size: 1.55rem;
font-weight: 500;
margin: 40px 0 20px;
letter-spacing: -0.01em;
}
.article-rich-text h3 {
font-size: 1.25rem;
font-weight: 500;
margin: 32px 0 16px;
}
.article-rich-text ul,
.article-rich-text ol {
margin-left: 0;
padding-left: 1.2em;
margin-bottom: 24px;
display: grid;
gap: 10px;
}
.article-rich-text li {
font-size: 0.95rem;
color: var(--text-muted);
}
.article-rich-text li::marker {
color: var(--gold-primary);
}
.article-rich-text blockquote {
margin: 36px 0;
padding: 10px 0 10px 24px;
border-left: 3px solid var(--gold-primary);
font-family: var(--font-heading);
font-style: italic;
font-size: 1.25rem;
line-height: 1.6;
color: var(--text-light);
}
.article-figure {
margin: 0 0 36px;
border: 1px solid var(--border-light);
padding: 10px;
background: var(--bg-slate);
}
.article-figure img {
width: 100%;
height: auto;
object-fit: cover;
opacity: 0.85;
border: 0;
}
.article-figure figcaption {
font-size: 0.78rem;
color: var(--text-muted);
text-align: center;
margin-top: 10px;
font-style: italic;
}
.article-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid var(--border-light);
}
.tag-item {
font-size: 0.78rem;
color: var(--gold-primary);
background: rgba(197, 168, 128, 0.05);
padding: 4px 12px;
border: 1px solid var(--border-light);
text-decoration: none !important;
}
.author-card {
text-align: center;
}
.card-avatar {
width: 52px;
height: 52px;
background: var(--bg-dark);
font-size: 0.85rem;
margin: 0 auto 16px;
}
.author-card h5 {
font-size: 1rem;
font-weight: 600;
color: var(--text-white);
margin-bottom: 8px;
}
.author-card p {
font-size: 0.8rem;
line-height: 1.5;
color: var(--text-muted);
}
.article-toc {
padding: 30px 24px;
}
.article-toc.is-hidden {
display: none;
}
.contact-cta-widget {
text-align: center;
background: linear-gradient(rgba(8, 10, 15, 0.95), rgba(8, 10, 15, 0.95)),
url(https://spmc.vn/wp-content/uploads/2026/07/trang-chu.avif) center/cover no-repeat;
border: 1px solid var(--border-strong);
}
.contact-cta-widget h4 {
font-size: 1.15rem;
font-weight: 500;
margin-bottom: 12px;
}
.contact-cta-widget p {
font-size: 0.82rem;
line-height: 1.5;
color: var(--text-muted);
margin-bottom: 24px;
}
.article-footer-cta {
padding-top: 60px;
background: var(--bg-slate);
}
@media (max-width: 990px) {
.news-layout-wrapper,
.article-layout-wrapper {
grid-template-columns: 1fr;
gap: 40px;
}
.news-sidebar,
.article-sidebar {
position: static;
}
}
@media (max-width: 600px) {
.articles-grid {
grid-template-columns: 1fr;
}
.category-hero {
padding-top: calc(var(--spmc-header-height, 78px) + 40px);
}
.article-hero {
padding-top: calc(var(--spmc-header-height, 78px) + 52px);
}
.article-meta {
gap: 12px;
}
.meta-divider {
display: none;
}
} body.single-post,
body.archive,
body.category,
body.tag,
body.blog,
body.search {
background: var(--bg-dark) !important;
}
body.single-post.ast-separate-container .ast-article-single,
body.single-post .ast-article-single,
body.archive.ast-separate-container .ast-article-post,
body.category.ast-separate-container .ast-article-post,
body.tag.ast-separate-container .ast-article-post,
body.blog.ast-separate-container .ast-article-post,
body.search.ast-separate-container .ast-article-post,
body.archive .ast-article-post,
body.category .ast-article-post,
body.tag .ast-article-post,
body.blog .ast-article-post,
body.search .ast-article-post {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.single-post.ast-separate-container #primary,
body.archive.ast-separate-container #primary,
body.category.ast-separate-container #primary,
body.tag.ast-separate-container #primary,
body.blog.ast-separate-container #primary,
body.search.ast-separate-container #primary,
body.single-post #primary.site-main,
body.archive #primary.site-main,
body.category #primary.site-main,
body.tag #primary.site-main,
body.blog #primary.site-main,
body.search #primary.site-main {
margin: 0 !important;
padding: 0 !important;
background: var(--bg-dark) !important;
border: 0 !important;
max-width: none !important;
}
body.single-post .article-detail,
body.single-post .article-rich-text,
body.single-post .article-content,
body.single-post .entry-content,
body.archive .news-list-area,
body.archive .articles-grid,
body.category .news-list-area,
body.category .articles-grid,
body.blog .news-list-area,
body.blog .articles-grid {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.article-hero {
padding-top: calc(var(--spmc-header-height, 82px) + 48px) !important;
padding-bottom: 38px !important;
}
.category-hero {
padding-top: calc(var(--spmc-header-height, 82px) + 42px) !important;
padding-bottom: 42px !important;
}
.news-page-container,
.article-body-container {
padding-top: 48px !important;
padding-bottom: 56px !important;
background: var(--bg-dark) !important;
}
.article-footer-cta {
padding-top: 46px !important;
padding-bottom: 64px !important;
}
.news-layout-wrapper,
.article-layout-wrapper {
gap: 34px !important;
}
.news-list-area {
gap: 30px !important;
}
.articles-grid {
gap: 24px !important;
}
.news-sidebar,
.article-sidebar {
gap: 22px !important;
}
.sidebar-widget {
padding: 24px 22px !important;
}
.sidebar-widget .widget-title {
margin-bottom: 16px !important;
padding-bottom: 10px !important;
}
.article-rich-text.article-content {
max-width: 780px;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
.article-rich-text.article-content > * + * {
margin-top: 0 !important;
}
.article-rich-text p {
margin: 0 0 18px !important;
}
.article-rich-text .lead,
.article-rich-text > p:first-of-type {
margin: 0 0 22px !important;
}
.article-rich-text h2 {
margin: 30px 0 14px !important;
}
.article-rich-text h3 {
margin: 24px 0 12px !important;
}
.article-rich-text ul,
.article-rich-text ol {
margin: 0 0 18px !important;
padding-left: 1.15em !important;
gap: 8px !important;
}
.article-rich-text blockquote {
margin: 26px 0 !important;
}
.article-figure,
.article-featured {
margin: 0 0 26px !important;
padding: 0 !important;
background: var(--bg-slate) !important;
border: 1px solid var(--border-light) !important;
}
.article-figure figcaption {
padding: 0 14px 12px !important;
}
.article-tags {
margin-top: 28px !important;
padding-top: 18px !important;
} .news-card.post-card {
display: flex !important;
flex-direction: column;
height: 100%;
min-height: 0;
overflow: hidden;
padding: 0 !important;
background: var(--bg-slate) !important;
border: 1px solid var(--border-light) !important;
}
.news-card.post-card.reveal {
opacity: 1;
transform: none;
}
.news-card.post-card .news-image,
.news-card.post-card .news-image a,
.news-card.post-card .news-image img,
.news-card.post-card .news-image-placeholder {
display: block;
width: 100%;
}
.news-card.post-card .news-image {
height: 196px;
background: var(--bg-dark);
}
.news-card.post-card .news-image img {
height: 100%;
object-fit: cover;
}
.news-card.post-card .news-image-placeholder {
height: 100%;
background:
linear-gradient(135deg, rgba(197, 168, 128, 0.12), rgba(197, 168, 128, 0.02)),
var(--bg-dark);
}
.news-card.post-card .news-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 22px !important;
}
.news-card.post-card .tag {
align-self: flex-start;
display: inline-flex;
margin: 0 0 10px !important;
text-decoration: none !important;
}
.news-card.post-card time {
margin-bottom: 8px !important;
}
.news-card.post-card h3 {
min-height: 0 !important;
margin: 0 0 12px !important;
font-size: 1.08rem !important;
line-height: 1.38 !important;
}
.news-card.post-card h3 a {
display: inline !important;
color: var(--text-white) !important;
font-family: var(--font-heading) !important;
font-size: inherit !important;
font-weight: 500 !important;
line-height: inherit !important;
letter-spacing: normal !important;
text-transform: none !important;
text-decoration: none !important;
}
.news-card.post-card h3 a:hover {
color: var(--gold-primary) !important;
}
.news-card.post-card .post-excerpt {
min-height: 0 !important;
margin: 0 0 16px !important;
color: var(--text-muted) !important;
font-size: 0.88rem !important;
line-height: 1.58 !important;
}
.news-card.post-card .read-more-link {
margin-top: auto;
display: inline-flex !important;
align-self: flex-start;
color: var(--gold-primary) !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
line-height: 1.3 !important;
text-decoration: none !important;
}
.pagination-wrapper {
margin-top: 12px !important;
padding-top: 24px !important;
}
@media (max-width: 990px) {
.news-page-container,
.article-body-container {
padding-top: 40px !important;
}
}
@media (max-width: 600px) {
.article-hero {
padding-top: calc(var(--spmc-header-height, 78px) + 36px) !important;
padding-bottom: 32px !important;
}
.category-hero {
padding-top: calc(var(--spmc-header-height, 78px) + 30px) !important;
padding-bottom: 34px !important;
}
.news-page-container,
.article-body-container {
padding-top: 34px !important;
padding-bottom: 44px !important;
}
.sidebar-widget {
padding: 22px 18px !important;
}
.news-card.post-card .news-body {
padding: 20px !important;
}
}    .strategy-hero {
position: relative;
padding: 160px 0 100px;
background: var(--bg-dark);
border-bottom: 1px solid var(--border-light);
}
.strategy-hero .hero-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 60px;
align-items: center;
}
.strategy-hero .hero-content {
max-width: 680px;
}
.strategy-hero h1 {
font-size: clamp(2.2rem, 4vw, 3.4rem);
margin-bottom: 20px;
font-family: var(--font-heading);
}
.strategy-hero .hero-quote-box {
margin: 32px 0;
padding: 24px 30px;
border-left: 2px solid var(--gold-primary);
background: rgba(197, 168, 128, 0.03);
position: relative;
}
.strategy-hero .hero-quote-box blockquote {
font-family: var(--font-heading);
font-size: clamp(1.05rem, 1.8vw, 1.25rem);
font-style: italic;
color: var(--gold-light);
line-height: 1.6;
margin-bottom: 10px;
}
.strategy-hero .hero-quote-box cite {
font-family: var(--font-primary);
font-size: 0.8rem;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-muted);
font-weight: 600;
}
.strategy-hero .hero-subtitle {
font-size: 1.02rem;
line-height: 1.7;
color: var(--text-muted);
} .strategy-hero .hero-image-frame {
position: relative;
width: 100%;
aspect-ratio: 4/5;
background: var(--bg-slate);
border: 1px solid var(--border-light);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.strategy-hero .hero-image-frame img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
filter: grayscale(0.2) contrast(1.1);
}
.strategy-hero .image-mask {
position: absolute;
inset: 0;
background: linear-gradient(30deg, var(--bg-dark) 5%, transparent 60%);
pointer-events: none;
} .pillars-section {
background: var(--bg-slate);
}
.pillars-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.pillar-card {
padding: 40px 32px;
background: var(--bg-dark);
border: 1px solid var(--border-light);
transition: var(--transition-medium);
display: flex;
flex-direction: column;
}
.pillar-card:hover {
transform: translateY(-5px);
border-color: var(--gold-primary);
box-shadow: 0 20px 40px rgba(197, 168, 128, 0.04);
}
.pillar-icon-wrapper {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
margin-bottom: 24px;
transition: var(--transition-fast);
}
.pillar-card:hover .pillar-icon-wrapper {
background: var(--gold-primary);
color: var(--bg-dark);
}
.pillar-card h3 {
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 20px;
border-bottom: 1px solid var(--border-light);
padding-bottom: 12px;
display: flex;
align-items: center;
gap: 12px;
}
.pillar-card h3 span {
font-family: var(--font-heading);
color: var(--gold-primary);
opacity: 0.5;
font-size: 1rem;
}
.pillar-sublist {
list-style: none;
margin-top: 5px;
}
.pillar-sublist li {
position: relative;
padding-left: 20px;
font-size: 0.88rem;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 10px;
transition: var(--transition-fast);
}
.pillar-sublist li:last-child {
margin-bottom: 0;
}
.pillar-sublist li::before {
content: "•";
position: absolute;
left: 4px;
color: var(--gold-primary);
font-size: 1.1rem;
line-height: 1;
}
.pillar-card:hover .pillar-sublist li {
color: var(--text-light);
} .focus-section {
background: var(--bg-dark);
}
.focus-grid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 60px;
align-items: center;
}
.focus-image-wrapper {
position: relative;
border: 1px solid var(--border-light);
background: var(--bg-slate);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
.focus-image-wrapper::before {
content: "";
position: absolute;
inset: -14px;
border: 1px solid var(--border-strong);
z-index: -1;
pointer-events: none;
transform: translate(6px, 6px);
}
.focus-image-wrapper img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
opacity: 0.85;
}
.focus-content h2 {
margin-bottom: 20px;
}
.focus-desc {
font-size: 1.05rem;
margin-bottom: 30px;
line-height: 1.7;
}
.focus-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.focus-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px 24px;
background: var(--bg-slate);
border: 1px solid var(--border-light);
transition: var(--transition-medium);
}
.focus-item:hover {
border-color: var(--gold-primary);
transform: translateX(6px);
}
.focus-item-icon {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
font-size: 0.75rem;
font-weight: bold;
flex-shrink: 0;
margin-top: 2px;
transition: var(--transition-fast);
}
.focus-item:hover .focus-item-icon {
background: var(--gold-primary);
color: var(--bg-dark);
}
.focus-item h4 {
font-family: var(--font-primary);
font-size: 0.95rem;
font-weight: 600;
color: var(--text-white);
margin-bottom: 4px;
}
.focus-item p {
font-size: 0.85rem;
line-height: 1.6;
color: var(--text-muted);
} .values-section {
background: var(--bg-slate);
}
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.value-glass-card {
padding: 36px 30px;
background: rgba(12, 15, 22, 0.6);
border: 1px solid var(--border-light);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: var(--transition-medium);
position: relative;
}
.value-glass-card:hover {
transform: translateY(-5px);
border-color: var(--gold-primary);
box-shadow: 0 15px 30px rgba(197, 168, 128, 0.03);
}
.value-check-icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
color: var(--gold-primary);
border-radius: 50%;
background: rgba(197, 168, 128, 0.08);
margin-bottom: 24px;
font-size: 1.2rem;
font-weight: bold;
transition: var(--transition-fast);
}
.value-glass-card:hover .value-check-icon {
background: var(--gold-primary);
color: var(--bg-dark);
}
.value-glass-card h3 {
font-family: var(--font-primary);
font-size: 0.98rem;
font-weight: 600;
color: var(--text-white);
line-height: 1.5;
}
.brand-signature {
text-align: center;
margin-top: 60px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.25em;
color: var(--gold-primary);
font-weight: 600;
opacity: 0.8;
} @media (max-width: 992px) {
.strategy-hero .hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.strategy-hero .hero-image-frame {
max-width: 100%;
aspect-ratio: 16/9;
}
.pillars-grid {
grid-template-columns: repeat(2, 1fr);
}
.focus-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.focus-image-wrapper {
max-width: 100%;
}
.values-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.pillars-grid {
grid-template-columns: 1fr;
}
.values-grid {
grid-template-columns: 1fr;
}
.focus-item {
padding: 16px 20px;
}
}   .investment-hero {
position: relative;
padding: 160px 0 100px;
background: var(--bg-dark);
border-bottom: 1px solid var(--border-light);
}
.investment-hero .hero-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 60px;
align-items: center;
}
.investment-hero .hero-content {
max-width: 620px;
}
.investment-hero h1 {
font-size: clamp(2rem, 3.8vw, 3.2rem);
font-family: var(--font-heading);
font-weight: 500;
line-height: 1.25;
margin-bottom: 24px;
color: var(--text-white);
}
.investment-hero h1 em {
font-family: var(--font-heading);
font-style: italic;
color: var(--gold-primary);
}
.investment-hero .hero-subtitle {
font-size: 1.05rem;
line-height: 1.7;
color: var(--text-muted);
margin-bottom: 32px;
} .investment-hero .hero-image-frame {
position: relative;
width: 100%;
aspect-ratio: 4/5;
background: var(--bg-slate);
border: 1px solid var(--border-light);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.investment-hero .hero-image-frame img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
filter: grayscale(0.15) contrast(1.05);
}
.investment-hero .image-mask {
position: absolute;
inset: 0;
background: linear-gradient(30deg, var(--bg-dark) 5%, transparent 60%);
pointer-events: none;
} .strategy-section {
background: var(--bg-slate);
}
.strategy-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.strategy-card {
padding: 36px 30px;
background: var(--bg-dark);
border: 1px solid var(--border-light);
transition: var(--transition-medium);
position: relative;
overflow: hidden;
}
.strategy-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 0;
background: var(--gold-primary);
transition: var(--transition-medium);
}
.strategy-card:hover {
transform: translateY(-5px);
border-color: var(--gold-primary);
box-shadow: 0 15px 35px rgba(197, 168, 128, 0.05);
}
.strategy-card:hover::before {
height: 100%;
}
.strategy-icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
margin-bottom: 24px;
transition: var(--transition-fast);
}
.strategy-card:hover .strategy-icon {
background: var(--gold-primary);
color: var(--bg-dark);
}
.strategy-card h3 {
font-size: 1.15rem;
font-weight: 500;
margin-bottom: 12px;
}
.strategy-card p {
font-size: 0.88rem;
line-height: 1.6;
color: var(--text-muted);
} .fundraising-section {
background: var(--bg-dark);
}
.timeline-wrapper {
position: relative;
max-width: 1000px;
margin: 50px auto 0;
padding: 20px 0;
}
.timeline-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: var(--border-light);
transform: translateX(-50%);
}
.timeline-progress {
position: absolute;
left: 50%;
top: 0;
width: 1px;
background: var(--gold-primary);
transform: translateX(-50%);
height: 0;
transition: height 1s ease-out;
}
.timeline-item {
display: flex;
justify-content: space-between;
margin-bottom: 60px;
position: relative;
width: 100%;
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-badge {
position: absolute;
left: 50%;
top: 20px;
width: 40px;
height: 40px;
background: var(--bg-dark);
border: 1px solid var(--border-strong);
color: var(--gold-primary);
border-radius: 50%;
display: grid;
place-items: center;
font-family: var(--font-heading);
font-weight: 600;
transform: translateX(-50%);
z-index: 10;
transition: var(--transition-medium);
}
.timeline-item.active .timeline-badge {
border-color: var(--gold-primary);
background: var(--gold-primary);
color: var(--bg-dark);
box-shadow: 0 0 15px rgba(197, 168, 128, 0.3);
}
.timeline-content-box {
width: 44%;
padding: 30px;
background: var(--bg-slate);
border: 1px solid var(--border-light);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
position: relative;
transition: var(--transition-medium);
}
.timeline-item.active .timeline-content-box {
border-color: var(--border-strong);
}
.timeline-item:nth-child(even) {
flex-direction: row-reverse;
}
.timeline-content-box h3 {
font-size: 1.2rem;
color: var(--text-white);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.timeline-content-box h3 span {
font-size: 0.8rem;
color: var(--gold-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.timeline-list {
list-style: none;
}
.timeline-list li {
position: relative;
padding-left: 24px;
font-size: 0.88rem;
color: var(--text-light);
margin-bottom: 12px;
}
.timeline-list li:last-child {
margin-bottom: 0;
}
.timeline-list li::before {
content: "→";
position: absolute;
left: 0;
color: var(--gold-primary);
font-weight: bold;
} .mna-section {
background: var(--bg-slate);
}
.mna-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: flex-start;
}
.mna-intro-card {
padding: 40px;
background: var(--bg-dark);
border: 1px solid var(--border-strong);
position: sticky;
top: 100px;
}
.mna-intro-card h3 {
font-size: 1.5rem;
margin-bottom: 16px;
color: var(--gold-primary);
}
.mna-intro-card p {
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 24px;
}
.mna-intro-badge {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--gold-primary);
font-weight: 600;
border-top: 1px solid var(--border-light);
padding-top: 20px;
width: 100%;
}
.accordion-container {
display: flex;
flex-direction: column;
gap: 16px;
}
.accordion-item {
border: 1px solid var(--border-light);
background: var(--bg-dark);
overflow: hidden;
transition: var(--transition-medium);
}
.accordion-item:hover,
.accordion-item.active {
border-color: var(--gold-primary);
}
.accordion-header {
width: 100%;
padding: 24px;
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
background: transparent;
cursor: pointer;
}
.accordion-title-wrapper {
display: flex;
align-items: center;
gap: 20px;
}
.accordion-number {
font-family: var(--font-heading);
font-size: 1.4rem;
color: var(--gold-primary);
font-weight: 500;
opacity: 0.6;
transition: var(--transition-fast);
}
.accordion-item.active .accordion-number {
opacity: 1;
}
.accordion-header h3 {
font-size: 1.05rem;
font-weight: 500;
font-family: var(--font-primary);
color: var(--text-light);
transition: var(--transition-fast);
}
.accordion-item.active .accordion-header h3 {
color: var(--text-white);
}
.accordion-icon {
font-size: 1.2rem;
color: var(--gold-primary);
transition: transform var(--transition-medium);
}
.accordion-item.active .accordion-icon {
transform: rotate(45deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s var(--ease-expo);
}
.accordion-body {
padding: 0 24px 24px 64px;
font-size: 0.88rem;
line-height: 1.65;
color: var(--text-muted);
border-top: 1px solid transparent;
}
.accordion-item.active .accordion-content {
max-height: 250px; } @media (max-width: 992px) {
.investment-hero .hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.investment-hero .hero-image-frame {
max-width: 100%;
aspect-ratio: 16/9;
}
.strategy-grid {
grid-template-columns: repeat(2, 1fr);
}
.mna-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.mna-intro-card {
position: static;
}
}
@media (max-width: 768px) {
.timeline-line,
.timeline-progress {
left: 20px;
}
.timeline-badge {
left: 20px;
transform: translate(-50%);
width: 32px;
height: 32px;
font-size: 0.9rem;
}
.timeline-item {
flex-direction: column !important;
padding-left: 50px;
margin-bottom: 40px;
}
.timeline-content-box {
width: 100%;
padding: 20px;
}
.strategy-grid {
grid-template-columns: 1fr;
}
.accordion-header {
padding: 20px;
}
.accordion-body {
padding: 0 20px 20px 52px;
}
}  .cashflow-hero {
position: relative;
padding: 160px 0 100px;
background: var(--bg-dark);
border-bottom: 1px solid var(--border-light);
}
.cashflow-hero .hero-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 60px;
align-items: center;
}
.cashflow-hero .hero-content {
max-width: 680px;
}
.cashflow-hero h1 {
font-size: clamp(2.2rem, 4vw, 3.4rem);
margin-bottom: 20px;
font-family: var(--font-heading);
}
.cashflow-hero .hero-quote-box {
margin: 32px 0;
padding: 24px 30px;
border-left: 2px solid var(--gold-primary);
background: rgba(197, 168, 128, 0.03);
position: relative;
}
.cashflow-hero .hero-quote-box blockquote {
font-family: var(--font-heading);
font-size: clamp(1.05rem, 1.8vw, 1.25rem);
font-style: italic;
color: var(--gold-light);
line-height: 1.6;
margin-bottom: 10px;
}
.cashflow-hero .hero-quote-box cite {
font-family: var(--font-primary);
font-size: 0.8rem;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-muted);
font-weight: 600;
}
.cashflow-hero .hero-subtitle {
font-size: 1.02rem;
line-height: 1.7;
color: var(--text-muted);
}
.cashflow-hero .hero-image-frame {
position: relative;
width: 100%;
aspect-ratio: 4/5;
background: var(--bg-slate);
border: 1px solid var(--border-light);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.cashflow-hero .hero-image-frame img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
filter: grayscale(0.2) contrast(1.1);
}
.cashflow-hero .image-mask {
position: absolute;
inset: 0;
background: linear-gradient(30deg, var(--bg-dark) 5%, transparent 60%);
pointer-events: none;
} .pillars-section {
background: var(--bg-slate);
}
.pillars-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.pillar-card {
padding: 40px 32px;
background: var(--bg-dark);
border: 1px solid var(--border-light);
transition: var(--transition-medium);
display: flex;
flex-direction: column;
}
.pillar-card:hover {
transform: translateY(-5px);
border-color: var(--gold-primary);
box-shadow: 0 20px 40px rgba(197, 168, 128, 0.04);
}
.pillar-icon-wrapper {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
margin-bottom: 24px;
transition: var(--transition-fast);
}
.pillar-card:hover .pillar-icon-wrapper {
background: var(--gold-primary);
color: var(--bg-dark);
}
.pillar-card h3 {
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 20px;
border-bottom: 1px solid var(--border-light);
padding-bottom: 12px;
display: flex;
align-items: center;
gap: 12px;
}
.pillar-card h3 span {
font-family: var(--font-heading);
color: var(--gold-primary);
opacity: 0.5;
font-size: 1rem;
}
.pillar-sublist {
list-style: none;
margin-top: 5px;
}
.pillar-sublist li {
position: relative;
padding-left: 20px;
font-size: 0.88rem;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 10px;
transition: var(--transition-fast);
}
.pillar-sublist li::before {
content: "•";
position: absolute;
left: 4px;
color: var(--gold-primary);
font-size: 1.1rem;
line-height: 1;
}
.pillar-card:hover .pillar-sublist li {
color: var(--text-light);
} .focus-section {
background: var(--bg-dark);
}
.focus-grid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 60px;
align-items: center;
}
.focus-image-wrapper {
position: relative;
border: 1px solid var(--border-light);
background: var(--bg-slate);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
.focus-image-wrapper::before {
content: "";
position: absolute;
inset: -14px;
border: 1px solid var(--border-strong);
z-index: -1;
pointer-events: none;
transform: translate(6px, 6px);
}
.focus-image-wrapper img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
opacity: 0.85;
}
.focus-content h2 {
margin-bottom: 20px;
}
.focus-desc {
font-size: 1.05rem;
margin-bottom: 30px;
line-height: 1.7;
}
.focus-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.focus-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px 24px;
background: var(--bg-slate);
border: 1px solid var(--border-light);
transition: var(--transition-medium);
}
.focus-item:hover {
border-color: var(--gold-primary);
transform: translateX(6px);
}
.focus-item-icon {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
font-size: 0.75rem;
font-weight: bold;
flex-shrink: 0;
margin-top: 2px;
transition: var(--transition-fast);
}
.focus-item:hover .focus-item-icon {
background: var(--gold-primary);
color: var(--bg-dark);
}
.focus-item h4 {
font-family: var(--font-primary);
font-size: 0.95rem;
font-weight: 600;
color: var(--text-white);
margin-bottom: 4px;
}
.focus-item p {
font-size: 0.85rem;
line-height: 1.6;
color: var(--text-muted);
} .values-section {
background: var(--bg-slate);
}
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.value-glass-card {
padding: 36px 30px;
background: rgba(12, 15, 22, 0.6);
border: 1px solid var(--border-light);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: var(--transition-medium);
position: relative;
}
.value-glass-card:hover {
transform: translateY(-5px);
border-color: var(--gold-primary);
box-shadow: 0 15px 30px rgba(197, 168, 128, 0.03);
}
.value-check-icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
color: var(--gold-primary);
border-radius: 50%;
background: rgba(197, 168, 128, 0.08);
margin-bottom: 24px;
font-size: 1.2rem;
font-weight: bold;
transition: var(--transition-fast);
}
.value-glass-card:hover .value-check-icon {
background: var(--gold-primary);
color: var(--bg-dark);
}
.value-glass-card h3 {
font-family: var(--font-primary);
font-size: 0.98rem;
font-weight: 600;
color: var(--text-white);
line-height: 1.5;
}
.brand-signature {
text-align: center;
margin-top: 60px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.25em;
color: var(--gold-primary);
font-weight: 600;
opacity: 0.8;
}
@media (max-width: 992px) {
.cashflow-hero .hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.cashflow-hero .hero-image-frame {
max-width: 100%;
aspect-ratio: 16/9;
}
.pillars-grid {
grid-template-columns: repeat(2, 1fr);
}
.focus-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.focus-image-wrapper {
max-width: 100%;
}
.values-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.pillars-grid {
grid-template-columns: 1fr;
}
.values-grid {
grid-template-columns: 1fr;
}
.focus-item {
padding: 16px 20px;
}
}   .fundraising-hero {
position: relative;
padding: 160px 0 100px;
background: var(--bg-dark);
border-bottom: 1px solid var(--border-light);
}
.fundraising-hero .hero-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 60px;
align-items: center;
}
.fundraising-hero .hero-content {
max-width: 680px;
}
.fundraising-hero h1 {
font-size: clamp(2.2rem, 4vw, 3.4rem);
margin-bottom: 20px;
font-family: var(--font-heading);
}
.fundraising-hero .hero-quote-box {
margin: 32px 0;
padding: 24px 30px;
border-left: 2px solid var(--gold-primary);
background: rgba(197, 168, 128, 0.03);
position: relative;
}
.fundraising-hero .hero-quote-box blockquote {
font-family: var(--font-heading);
font-size: clamp(1.05rem, 1.8vw, 1.25rem);
font-style: italic;
color: var(--gold-light);
line-height: 1.6;
margin-bottom: 10px;
}
.fundraising-hero .hero-quote-box cite {
font-family: var(--font-primary);
font-size: 0.8rem;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-muted);
font-weight: 600;
}
.fundraising-hero .hero-subtitle {
font-size: 1.02rem;
line-height: 1.7;
color: var(--text-muted);
} .fundraising-hero .hero-image-frame {
position: relative;
width: 100%;
aspect-ratio: 4/5;
background: var(--bg-slate);
border: 1px solid var(--border-light);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.fundraising-hero .hero-image-frame img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
filter: grayscale(0.2) contrast(1.1);
}
.fundraising-hero .image-mask {
position: absolute;
inset: 0;
background: linear-gradient(30deg, var(--bg-dark) 5%, transparent 60%);
pointer-events: none;
} .pillars-section {
background: var(--bg-slate);
}
.pillars-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.pillar-card {
padding: 40px 32px;
background: var(--bg-dark);
border: 1px solid var(--border-light);
transition: var(--transition-medium);
display: flex;
flex-direction: column;
}
.pillar-card:hover {
transform: translateY(-5px);
border-color: var(--gold-primary);
box-shadow: 0 20px 40px rgba(197, 168, 128, 0.04);
}
.pillar-icon-wrapper {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
margin-bottom: 24px;
transition: var(--transition-fast);
}
.pillar-card:hover .pillar-icon-wrapper {
background: var(--gold-primary);
color: var(--bg-dark);
}
.pillar-card h3 {
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 20px;
border-bottom: 1px solid var(--border-light);
padding-bottom: 12px;
display: flex;
align-items: center;
gap: 12px;
}
.pillar-card h3 span {
font-family: var(--font-heading);
color: var(--gold-primary);
opacity: 0.5;
font-size: 1rem;
}
.pillar-sublist {
list-style: none;
margin-top: 5px;
}
.pillar-sublist li {
position: relative;
padding-left: 20px;
font-size: 0.88rem;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 10px;
transition: var(--transition-fast);
}
.pillar-sublist li:last-child {
margin-bottom: 0;
}
.pillar-sublist li::before {
content: "•";
position: absolute;
left: 4px;
color: var(--gold-primary);
font-size: 1.1rem;
line-height: 1;
}
.pillar-card:hover .pillar-sublist li {
color: var(--text-light);
} .focus-section {
background: var(--bg-dark);
}
.focus-grid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 60px;
align-items: center;
}
.focus-image-wrapper {
position: relative;
border: 1px solid var(--border-light);
background: var(--bg-slate);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
.focus-image-wrapper::before {
content: "";
position: absolute;
inset: -14px;
border: 1px solid var(--border-strong);
z-index: -1;
pointer-events: none;
transform: translate(6px, 6px);
}
.focus-image-wrapper img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
opacity: 0.85;
}
.focus-content h2 {
margin-bottom: 20px;
}
.focus-desc {
font-size: 1.05rem;
margin-bottom: 30px;
line-height: 1.7;
}
.focus-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.focus-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px 24px;
background: var(--bg-slate);
border: 1px solid var(--border-light);
transition: var(--transition-medium);
}
.focus-item:hover {
border-color: var(--gold-primary);
transform: translateX(6px);
}
.focus-item-icon {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
font-size: 0.75rem;
font-weight: bold;
flex-shrink: 0;
margin-top: 2px;
transition: var(--transition-fast);
}
.focus-item:hover .focus-item-icon {
background: var(--gold-primary);
color: var(--bg-dark);
}
.focus-item h4 {
font-family: var(--font-primary);
font-size: 0.95rem;
font-weight: 600;
color: var(--text-white);
margin-bottom: 4px;
}
.focus-item p {
font-size: 0.85rem;
line-height: 1.6;
color: var(--text-muted);
} .values-section {
background: var(--bg-slate);
}
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.value-glass-card {
padding: 36px 30px;
background: rgba(12, 15, 22, 0.6);
border: 1px solid var(--border-light);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: var(--transition-medium);
position: relative;
}
.value-glass-card:hover {
transform: translateY(-5px);
border-color: var(--gold-primary);
box-shadow: 0 15px 30px rgba(197, 168, 128, 0.03);
}
.value-check-icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
color: var(--gold-primary);
border-radius: 50%;
background: rgba(197, 168, 128, 0.08);
margin-bottom: 24px;
font-size: 1.2rem;
font-weight: bold;
transition: var(--transition-fast);
}
.value-glass-card:hover .value-check-icon {
background: var(--gold-primary);
color: var(--bg-dark);
}
.value-glass-card h3 {
font-family: var(--font-primary);
font-size: 0.98rem;
font-weight: 600;
color: var(--text-white);
line-height: 1.5;
}
.brand-signature {
text-align: center;
margin-top: 60px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.25em;
color: var(--gold-primary);
font-weight: 600;
opacity: 0.8;
} @media (max-width: 992px) {
.fundraising-hero .hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.fundraising-hero .hero-image-frame {
max-width: 100%;
aspect-ratio: 16/9;
}
.pillars-grid {
grid-template-columns: repeat(2, 1fr);
}
.focus-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.focus-image-wrapper {
max-width: 100%;
}
.values-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.pillars-grid {
grid-template-columns: 1fr;
}
.values-grid {
grid-template-columns: 1fr;
}
.focus-item {
padding: 16px 20px;
}
} .spmc-service-page {
background: var(--bg-dark);
color: var(--text-light);
overflow: hidden;
}
.spmc-service-page .section:first-child {
padding-top: calc(150px + var(--spmc-admin-bar-height, 0px));
}
.spmc-service-page .hero-actions a,
.spmc-service-page .hero-actions button,
.spmc-service-page .cta-capsule a,
.spmc-service-page .cta-capsule button {
text-decoration: none;
}
.spmc-service-page .pillar-card svg,
.spmc-service-page .strategy-card svg,
.spmc-service-page .hero-actions svg,
.spmc-service-page .accordion-header svg {
width: 22px;
height: 22px;
display: block;
}
.spmc-service-page .section + .section {
margin-top: 0;
}
.spmc-service-page .focus-list,
.spmc-service-page .pillar-sublist,
.spmc-service-page .value-list,
.spmc-service-page .benefits-list {
padding-left: 0;
}
.spmc-service-page .accordion-header {
width: 100%;
text-align: left;
}
@media (max-width: 860px) {
.spmc-service-page .section:first-child {
padding-top: calc(118px + var(--spmc-admin-bar-height, 0px));
}
} html,
body,
body.custom-background,
body.ast-separate-container,
body.ast-page-builder-template {
background-color: var(--bg-dark) !important;
}
body.spmc-dark-canvas,
body.spmc-dark-canvas #page,
body.spmc-dark-canvas .site,
body.spmc-dark-canvas #content,
body.spmc-dark-canvas .site-content,
body.spmc-dark-canvas .ast-container,
body.spmc-dark-canvas .content-area,
body.spmc-dark-canvas .site-main,
body.spmc-dark-canvas article,
body.spmc-dark-canvas .entry-content,
body.error404,
body.error404 #page,
body.error404 .site,
body.error404 #content,
body.error404 .site-content,
body.error404 .ast-container,
body.error404 .content-area,
body.error404 .site-main,
body.error404 article,
body.error404 .entry-content {
background: var(--bg-dark) !important;
border-color: transparent;
box-shadow: none !important;
}
body.spmc-dark-canvas #page,
body.spmc-dark-canvas .site,
body.error404 #page,
body.error404 .site {
min-height: 100vh;
}
body.spmc-dark-canvas .site-content,
body.spmc-dark-canvas #content,
body.error404 .site-content,
body.error404 #content {
margin: 0 !important;
padding: 0 !important;
}
body.spmc-service-canvas.ast-separate-container .ast-article-single,
body.spmc-service-canvas.ast-separate-container .ast-article-post,
body.spmc-service-canvas .ast-article-single,
body.spmc-service-canvas .ast-article-post,
body.error404.ast-separate-container .ast-article-single,
body.error404.ast-separate-container .ast-article-post,
body.error404 .ast-article-single,
body.error404 .ast-article-post {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
body.spmc-service-canvas .spmc-service-page,
body.error404 .error-404-page {
background: var(--bg-dark) !important;
margin-bottom: 0 !important;
}
body.spmc-service-canvas .spmc-service-page > .section:last-child,
body.error404 .error-404-page {
border-bottom: 1px solid var(--border-light);
}
body.spmc-dark-canvas .site-footer,
body.error404 .site-footer {
margin-top: 0 !important;
background: #05060a !important;
}
body.spmc-dark-canvas .footer-bottom,
body.error404 .footer-bottom {
background: #05060a !important;
}
body.spmc-dark-canvas::before,
body.spmc-dark-canvas::after,
body.error404::before,
body.error404::after {
background: var(--bg-dark) !important;
}   .taichinh-hero {
position: relative;
padding: 160px 0 100px;
background: var(--bg-dark);
border-bottom: 1px solid var(--border-light);
}
.taichinh-hero .hero-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 60px;
align-items: center;
}
.taichinh-hero .hero-content {
max-width: 620px;
}
.taichinh-hero h1 {
font-size: clamp(2rem, 3.8vw, 3.2rem);
font-family: var(--font-heading);
font-weight: 500;
line-height: 1.25;
margin-bottom: 24px;
color: var(--text-white);
}
.taichinh-hero h1 em {
font-family: var(--font-heading);
font-style: italic;
color: var(--gold-primary);
}
.taichinh-hero .hero-subtitle {
font-size: 1.05rem;
line-height: 1.7;
color: var(--text-muted);
margin-bottom: 32px;
}
.taichinh-hero .hero-image-frame {
position: relative;
width: 100%;
aspect-ratio: 4/5;
background: var(--bg-slate);
border: 1px solid var(--border-light);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.taichinh-hero .hero-image-frame img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
filter: grayscale(0.15) contrast(1.05);
}
.taichinh-hero .image-mask {
position: absolute;
inset: 0;
background: linear-gradient(30deg, var(--bg-dark) 5%, transparent 60%);
pointer-events: none;
} .fin-services-section {
background: var(--bg-slate);
}
.fin-services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 40px;
}
.fin-service-card {
padding: 44px 36px;
background: var(--bg-dark);
border: 1px solid var(--border-light);
transition: var(--transition-medium);
display: flex;
flex-direction: column;
}
.fin-service-card:hover {
transform: translateY(-5px);
border-color: var(--gold-primary);
box-shadow: 0 15px 35px rgba(197, 168, 128, 0.05);
}
.fin-service-icon-wrapper {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
margin-bottom: 28px;
transition: var(--transition-fast);
}
.fin-service-card:hover class {
background: var(--gold-primary);
color: var(--bg-dark);
}
.fin-service-card h3 {
font-size: 1.35rem;
font-weight: 500;
margin-bottom: 20px;
font-family: var(--font-heading);
}
.fin-service-list {
list-style: none;
margin-bottom: 30px;
flex-grow: 1;
}
.fin-service-list li {
position: relative;
padding-left: 24px;
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 12px;
transition: var(--transition-fast);
}
.fin-service-list li::before {
content: "→";
position: absolute;
left: 0;
color: var(--gold-primary);
font-weight: bold;
}
.fin-service-card:hover .fin-service-list li {
color: var(--text-light);
}
.fin-service-card:hover .fin-service-icon-wrapper {
background: var(--gold-primary);
color: var(--bg-dark);
} @media (max-width: 768px) {
.taichinh-hero .hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.taichinh-hero .hero-image-frame {
aspect-ratio: 16/9;
}
.fin-services-grid {
grid-template-columns: 1fr;
}
}  .thuxepvon-hero {
position: relative;
padding: 160px 0 100px;
background: var(--bg-dark);
border-bottom: 1px solid var(--border-light);
}
.thuxepvon-hero .hero-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 60px;
align-items: center;
}
.thuxepvon-hero .hero-content {
max-width: 680px;
}
.thuxepvon-hero h1 {
font-size: clamp(2.2rem, 4vw, 3.4rem);
margin-bottom: 20px;
font-family: var(--font-heading);
}
.thuxepvon-hero .hero-quote-box {
margin: 32px 0;
padding: 24px 30px;
border-left: 2px solid var(--gold-primary);
background: rgba(197, 168, 128, 0.03);
position: relative;
}
.thuxepvon-hero .hero-quote-box blockquote {
font-family: var(--font-heading);
font-size: clamp(1.05rem, 1.8vw, 1.25rem);
font-style: italic;
color: var(--gold-light);
line-height: 1.6;
margin-bottom: 10px;
}
.thuxepvon-hero .hero-quote-box cite {
font-family: var(--font-primary);
font-size: 0.8rem;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-muted);
font-weight: 600;
}
.thuxepvon-hero .hero-subtitle {
font-size: 1.02rem;
line-height: 1.7;
color: var(--text-muted);
}
.thuxepvon-hero .hero-image-frame {
position: relative;
width: 100%;
aspect-ratio: 4/5;
background: var(--bg-slate);
border: 1px solid var(--border-light);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.thuxepvon-hero .hero-image-frame img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
filter: grayscale(0.2) contrast(1.1);
}
.thuxepvon-hero .image-mask {
position: absolute;
inset: 0;
background: linear-gradient(30deg, var(--bg-dark) 5%, transparent 60%);
pointer-events: none;
} .pillars-section {
background: var(--bg-slate);
}
.pillars-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.pillar-card {
padding: 40px 32px;
background: var(--bg-dark);
border: 1px solid var(--border-light);
transition: var(--transition-medium);
display: flex;
flex-direction: column;
}
.pillar-card:hover {
transform: translateY(-5px);
border-color: var(--gold-primary);
box-shadow: 0 20px 40px rgba(197, 168, 128, 0.04);
}
.pillar-icon-wrapper {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
margin-bottom: 24px;
transition: var(--transition-fast);
}
.pillar-card:hover .pillar-icon-wrapper {
background: var(--gold-primary);
color: var(--bg-dark);
}
.pillar-card h3 {
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 20px;
border-bottom: 1px solid var(--border-light);
padding-bottom: 12px;
display: flex;
align-items: center;
gap: 12px;
}
.pillar-card h3 span {
font-family: var(--font-heading);
color: var(--gold-primary);
opacity: 0.5;
font-size: 1rem;
}
.pillar-sublist {
list-style: none;
margin-top: 5px;
}
.pillar-sublist li {
position: relative;
padding-left: 20px;
font-size: 0.88rem;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 10px;
transition: var(--transition-fast);
}
.pillar-sublist li::before {
content: "•";
position: absolute;
left: 4px;
color: var(--gold-primary);
font-size: 1.1rem;
line-height: 1;
}
.pillar-card:hover .pillar-sublist li {
color: var(--text-light);
} .focus-section {
background: var(--bg-dark);
}
.focus-grid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 60px;
align-items: center;
}
.focus-image-wrapper {
position: relative;
border: 1px solid var(--border-light);
background: var(--bg-slate);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
.focus-image-wrapper::before {
content: "";
position: absolute;
inset: -14px;
border: 1px solid var(--border-strong);
z-index: -1;
pointer-events: none;
transform: translate(6px, 6px);
}
.focus-image-wrapper img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
opacity: 0.85;
}
.focus-content h2 {
margin-bottom: 20px;
}
.focus-desc {
font-size: 1.05rem;
margin-bottom: 30px;
line-height: 1.7;
}
.focus-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.focus-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px 24px;
background: var(--bg-slate);
border: 1px solid var(--border-light);
transition: var(--transition-medium);
}
.focus-item:hover {
border-color: var(--gold-primary);
transform: translateX(6px);
}
.focus-item-icon {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
font-size: 0.75rem;
font-weight: bold;
flex-shrink: 0;
margin-top: 2px;
transition: var(--transition-fast);
}
.focus-item:hover .focus-item-icon {
background: var(--gold-primary);
color: var(--bg-dark);
}
.focus-item h4 {
font-family: var(--font-primary);
font-size: 0.95rem;
font-weight: 600;
color: var(--text-white);
margin-bottom: 4px;
}
.focus-item p {
font-size: 0.85rem;
line-height: 1.6;
color: var(--text-muted);
} .values-section {
background: var(--bg-slate);
}
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.value-glass-card {
padding: 36px 30px;
background: rgba(12, 15, 22, 0.6);
border: 1px solid var(--border-light);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: var(--transition-medium);
position: relative;
}
.value-glass-card:hover {
transform: translateY(-5px);
border-color: var(--gold-primary);
box-shadow: 0 15px 30px rgba(197, 168, 128, 0.03);
}
.value-check-icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
color: var(--gold-primary);
border-radius: 50%;
background: rgba(197, 168, 128, 0.08);
margin-bottom: 24px;
font-size: 1.2rem;
font-weight: bold;
transition: var(--transition-fast);
}
.value-glass-card:hover .value-check-icon {
background: var(--gold-primary);
color: var(--bg-dark);
}
.value-glass-card h3 {
font-family: var(--font-primary);
font-size: 0.98rem;
font-weight: 600;
color: var(--text-white);
line-height: 1.5;
}
.brand-signature {
text-align: center;
margin-top: 60px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.25em;
color: var(--gold-primary);
font-weight: 600;
opacity: 0.8;
}
@media (max-width: 992px) {
.thuxepvon-hero .hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.thuxepvon-hero .hero-image-frame {
max-width: 100%;
aspect-ratio: 16/9;
}
.pillars-grid {
grid-template-columns: repeat(2, 1fr);
}
.focus-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.focus-image-wrapper {
max-width: 100%;
}
.values-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.pillars-grid {
grid-template-columns: 1fr;
}
.values-grid {
grid-template-columns: 1fr;
}
.focus-item {
padding: 16px 20px;
}
}  .toiuu-hero {
position: relative;
padding: 160px 0 100px;
background: var(--bg-dark);
border-bottom: 1px solid var(--border-light);
}
.toiuu-hero .hero-grid {
display: grid;
grid-template-columns: 1.254fr 0.746fr;
gap: 60px;
align-items: center;
}
.toiuu-hero .hero-content {
max-width: 720px;
}
.toiuu-hero h1 {
font-size: clamp(2.2rem, 4vw, 3.4rem);
margin-bottom: 20px;
font-family: var(--font-heading);
}
.toiuu-hero .hero-quote-box {
margin: 32px 0;
padding: 24px 30px;
border-left: 2px solid var(--gold-primary);
background: rgba(197, 168, 128, 0.03);
position: relative;
}
.toiuu-hero .hero-quote-box blockquote {
font-family: var(--font-heading);
font-size: clamp(1rem, 1.7vw, 1.15rem);
font-style: italic;
color: var(--gold-light);
line-height: 1.6;
margin-bottom: 10px;
}
.toiuu-hero .hero-quote-box cite {
font-family: var(--font-primary);
font-size: 0.8rem;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-muted);
font-weight: 600;
}
.toiuu-hero .hero-subtitle {
font-size: 1.02rem;
line-height: 1.7;
color: var(--text-muted);
}
.toiuu-hero .hero-image-frame {
position: relative;
width: 100%;
aspect-ratio: 4/5;
background: var(--bg-slate);
border: 1px solid var(--border-light);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.toiuu-hero .hero-image-frame img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
filter: grayscale(0.2) contrast(1.1);
}
.toiuu-hero .image-mask {
position: absolute;
inset: 0;
background: linear-gradient(30deg, var(--bg-dark) 5%, transparent 60%);
pointer-events: none;
} .pillars-section {
background: var(--bg-slate);
}
.pillars-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.pillar-card {
padding: 40px 32px;
background: var(--bg-dark);
border: 1px solid var(--border-light);
transition: var(--transition-medium);
display: flex;
flex-direction: column;
}
.pillar-card:hover {
transform: translateY(-5px);
border-color: var(--gold-primary);
box-shadow: 0 20px 40px rgba(197, 168, 128, 0.04);
}
.pillar-icon-wrapper {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
margin-bottom: 24px;
transition: var(--transition-fast);
}
.pillar-card:hover .pillar-icon-wrapper {
background: var(--gold-primary);
color: var(--bg-dark);
}
.pillar-card h3 {
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 20px;
border-bottom: 1px solid var(--border-light);
padding-bottom: 12px;
display: flex;
align-items: center;
gap: 12px;
}
.pillar-card h3 span {
font-family: var(--font-heading);
color: var(--gold-primary);
opacity: 0.5;
font-size: 1rem;
}
.pillar-sublist {
list-style: none;
margin-top: 5px;
}
.pillar-sublist li {
position: relative;
padding-left: 20px;
font-size: 0.88rem;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 10px;
transition: var(--transition-fast);
}
.pillar-sublist li::before {
content: "•";
position: absolute;
left: 4px;
color: var(--gold-primary);
font-size: 1.1rem;
line-height: 1;
}
.pillar-card:hover .pillar-sublist li {
color: var(--text-light);
} .focus-section {
background: var(--bg-dark);
}
.focus-grid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 60px;
align-items: center;
}
.focus-image-wrapper {
position: relative;
border: 1px solid var(--border-light);
background: var(--bg-slate);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
.focus-image-wrapper::before {
content: "";
position: absolute;
inset: -14px;
border: 1px solid var(--border-strong);
z-index: -1;
pointer-events: none;
transform: translate(6px, 6px);
}
.focus-image-wrapper img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
opacity: 0.85;
}
.focus-content h2 {
margin-bottom: 20px;
}
.focus-desc {
font-size: 1.05rem;
margin-bottom: 30px;
line-height: 1.7;
}
.focus-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.focus-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px 24px;
background: var(--bg-slate);
border: 1px solid var(--border-light);
transition: var(--transition-medium);
}
.focus-item:hover {
border-color: var(--gold-primary);
transform: translateX(6px);
}
.focus-item-icon {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
font-size: 0.75rem;
font-weight: bold;
flex-shrink: 0;
margin-top: 2px;
transition: var(--transition-fast);
}
.focus-item:hover .focus-item-icon {
background: var(--gold-primary);
color: var(--bg-dark);
}
.focus-item h4 {
font-family: var(--font-primary);
font-size: 0.95rem;
font-weight: 600;
color: var(--text-white);
margin-bottom: 4px;
}
.focus-item p {
font-size: 0.85rem;
line-height: 1.6;
color: var(--text-muted);
} .values-section {
background: var(--bg-slate);
}
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.value-glass-card {
padding: 36px 30px;
background: rgba(12, 15, 22, 0.6);
border: 1px solid var(--border-light);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: var(--transition-medium);
position: relative;
}
.value-glass-card:hover {
transform: translateY(-5px);
border-color: var(--gold-primary);
box-shadow: 0 15px 30px rgba(197, 168, 128, 0.03);
}
.value-check-icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
color: var(--gold-primary);
border-radius: 50%;
background: rgba(197, 168, 128, 0.08);
margin-bottom: 24px;
font-size: 1.2rem;
font-weight: bold;
transition: var(--transition-fast);
}
.value-glass-card:hover .value-check-icon {
background: var(--gold-primary);
color: var(--bg-dark);
}
.value-glass-card h3 {
font-family: var(--font-primary);
font-size: 0.98rem;
font-weight: 600;
color: var(--text-white);
line-height: 1.5;
}
.brand-signature {
text-align: center;
margin-top: 60px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.25em;
color: var(--gold-primary);
font-weight: 600;
opacity: 0.8;
}
@media (max-width: 992px) {
.toiuu-hero .hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.toiuu-hero .hero-image-frame {
max-width: 100%;
aspect-ratio: 16/9;
}
.pillars-grid {
grid-template-columns: repeat(2, 1fr);
}
.focus-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.focus-image-wrapper {
max-width: 100%;
}
.values-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.pillars-grid {
grid-template-columns: 1fr;
}
.values-grid {
grid-template-columns: 1fr;
}
.focus-item {
padding: 16px 20px;
}
}  .nhansu-hero {
position: relative;
padding: 160px 0 100px;
background: var(--bg-dark);
border-bottom: 1px solid var(--border-light);
}
.nhansu-hero .hero-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 60px;
align-items: center;
}
.nhansu-hero .hero-content {
max-width: 680px;
}
.nhansu-hero h1 {
font-size: clamp(2.2rem, 4vw, 3.4rem);
margin-bottom: 20px;
font-family: var(--font-heading);
}
.nhansu-hero .hero-quote-box {
margin: 32px 0;
padding: 24px 30px;
border-left: 2px solid var(--gold-primary);
background: rgba(197, 168, 128, 0.03);
position: relative;
}
.nhansu-hero .hero-quote-box blockquote {
font-family: var(--font-heading);
font-size: clamp(1.05rem, 1.8vw, 1.25rem);
font-style: italic;
color: var(--gold-light);
line-height: 1.6;
margin-bottom: 10px;
}
.nhansu-hero .hero-quote-box cite {
font-family: var(--font-primary);
font-size: 0.8rem;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-muted);
font-weight: 600;
}
.nhansu-hero .hero-subtitle {
font-size: 1.02rem;
line-height: 1.7;
color: var(--text-muted);
}
.nhansu-hero .hero-image-frame {
position: relative;
width: 100%;
aspect-ratio: 4/5;
background: var(--bg-slate);
border: 1px solid var(--border-light);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.nhansu-hero .hero-image-frame img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
filter: grayscale(0.2) contrast(1.1);
}
.nhansu-hero .image-mask {
position: absolute;
inset: 0;
background: linear-gradient(30deg, var(--bg-dark) 5%, transparent 60%);
pointer-events: none;
} .pillars-section {
background: var(--bg-slate);
}
.pillars-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.pillar-card {
padding: 40px 32px;
background: var(--bg-dark);
border: 1px solid var(--border-light);
transition: var(--transition-medium);
display: flex;
flex-direction: column;
}
.pillar-card:hover {
transform: translateY(-5px);
border-color: var(--gold-primary);
box-shadow: 0 20px 40px rgba(197, 168, 128, 0.04);
}
.pillar-icon-wrapper {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
margin-bottom: 24px;
transition: var(--transition-fast);
}
.pillar-card:hover .pillar-icon-wrapper {
background: var(--gold-primary);
color: var(--bg-dark);
}
.pillar-card h3 {
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 20px;
border-bottom: 1px solid var(--border-light);
padding-bottom: 12px;
display: flex;
align-items: center;
gap: 12px;
}
.pillar-card h3 span {
font-family: var(--font-heading);
color: var(--gold-primary);
opacity: 0.5;
font-size: 1rem;
}
.pillar-sublist {
list-style: none;
margin-top: 5px;
}
.pillar-sublist li {
position: relative;
padding-left: 20px;
font-size: 0.88rem;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 10px;
transition: var(--transition-fast);
}
.pillar-sublist li::before {
content: "•";
position: absolute;
left: 4px;
color: var(--gold-primary);
font-size: 1.1rem;
line-height: 1;
}
.pillar-card:hover .pillar-sublist li {
color: var(--text-light);
} .pricing-section {
background: var(--bg-dark);
}
.pricing-table-wrapper {
margin-top: 40px;
overflow-x: auto;
border: 1px solid var(--border-light);
}
.pricing-table {
width: 100%;
border-collapse: collapse;
text-align: left;
min-width: 800px;
background: var(--bg-slate);
}
.pricing-table th,
.pricing-table td {
padding: 24px;
border-bottom: 1px solid var(--border-light);
}
.pricing-table th {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 500;
color: var(--gold-primary);
background: rgba(12, 15, 22, 0.8);
}
.pricing-table td strong {
color: var(--text-white);
font-size: 1rem;
}
.pricing-table tr:hover td {
background: rgba(255, 255, 255, 0.01);
}
.pricing-table tr:last-child td {
border-bottom: none;
} .focus-section {
background: var(--bg-slate);
}
.focus-grid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 60px;
align-items: center;
}
.focus-image-wrapper {
position: relative;
border: 1px solid var(--border-light);
background: var(--bg-dark);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
.focus-image-wrapper::before {
content: "";
position: absolute;
inset: -14px;
border: 1px solid var(--border-strong);
z-index: -1;
pointer-events: none;
transform: translate(6px, 6px);
}
.focus-image-wrapper img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
opacity: 0.85;
}
.focus-content h2 {
margin-bottom: 20px;
}
.focus-desc {
font-size: 1.05rem;
margin-bottom: 30px;
line-height: 1.7;
}
.focus-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.focus-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px 24px;
background: var(--bg-dark);
border: 1px solid var(--border-light);
transition: var(--transition-medium);
}
.focus-item:hover {
border-color: var(--gold-primary);
transform: translateX(6px);
}
.focus-item-icon {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
font-size: 0.75rem;
font-weight: bold;
flex-shrink: 0;
margin-top: 2px;
transition: var(--transition-fast);
}
.focus-item:hover .focus-item-icon {
background: var(--gold-primary);
color: var(--bg-dark);
}
.focus-item h4 {
font-family: var(--font-primary);
font-size: 0.95rem;
font-weight: 600;
color: var(--text-white);
margin-bottom: 4px;
}
.focus-item p {
font-size: 0.85rem;
line-height: 1.6;
color: var(--text-muted);
} .values-section {
background: var(--bg-dark);
}
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.value-glass-card {
padding: 36px 30px;
background: rgba(12, 15, 22, 0.6);
border: 1px solid var(--border-light);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: var(--transition-medium);
position: relative;
}
.value-glass-card:hover {
transform: translateY(-5px);
border-color: var(--gold-primary);
box-shadow: 0 15px 30px rgba(197, 168, 128, 0.03);
}
.value-check-icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
color: var(--gold-primary);
border-radius: 50%;
background: rgba(197, 168, 128, 0.08);
margin-bottom: 24px;
font-size: 1.2rem;
font-weight: bold;
transition: var(--transition-fast);
}
.value-glass-card:hover .value-check-icon {
background: var(--gold-primary);
color: var(--bg-dark);
}
.value-glass-card h3 {
font-family: var(--font-primary);
font-size: 0.98rem;
font-weight: 600;
color: var(--text-white);
line-height: 1.5;
}
.brand-signature {
text-align: center;
margin-top: 60px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.25em;
color: var(--gold-primary);
font-weight: 600;
opacity: 0.8;
}
@media (max-width: 992px) {
.nhansu-hero .hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.nhansu-hero .hero-image-frame {
max-width: 100%;
aspect-ratio: 16/9;
}
.pillars-grid {
grid-template-columns: repeat(2, 1fr);
}
.focus-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.focus-image-wrapper {
max-width: 100%;
}
.values-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.pillars-grid {
grid-template-columns: 1fr;
}
.values-grid {
grid-template-columns: 1fr;
}
.focus-item {
padding: 16px 20px;
}
}   .mna-hero {
position: relative;
padding: 160px 0 100px;
background: var(--bg-dark);
border-bottom: 1px solid var(--border-light);
}
.mna-hero .hero-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 60px;
align-items: center;
}
.mna-hero .hero-content {
max-width: 680px;
}
.mna-hero h1 {
font-size: clamp(2.2rem, 4vw, 3.4rem);
margin-bottom: 20px;
font-family: var(--font-heading);
}
.mna-hero .hero-quote-box {
margin: 32px 0;
padding: 24px 30px;
border-left: 2px solid var(--gold-primary);
background: rgba(197, 168, 128, 0.03);
position: relative;
}
.mna-hero .hero-quote-box blockquote {
font-family: var(--font-heading);
font-size: clamp(1.05rem, 1.8vw, 1.25rem);
font-style: italic;
color: var(--gold-light);
line-height: 1.6;
margin-bottom: 10px;
}
.mna-hero .hero-quote-box cite {
font-family: var(--font-primary);
font-size: 0.8rem;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-muted);
font-weight: 600;
}
.mna-hero .hero-subtitle {
font-size: 1.02rem;
line-height: 1.7;
color: var(--text-muted);
} .mna-hero .hero-image-frame {
position: relative;
width: 100%;
aspect-ratio: 4/5;
background: var(--bg-slate);
border: 1px solid var(--border-light);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.mna-hero .hero-image-frame img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
filter: grayscale(0.2) contrast(1.1);
}
.mna-hero .image-mask {
position: absolute;
inset: 0;
background: linear-gradient(30deg, var(--bg-dark) 5%, transparent 60%);
pointer-events: none;
} .pillars-section {
background: var(--bg-slate);
}
.pillars-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.pillar-card {
padding: 40px 32px;
background: var(--bg-dark);
border: 1px solid var(--border-light);
transition: var(--transition-medium);
display: flex;
flex-direction: column;
}
.pillar-card:hover {
transform: translateY(-5px);
border-color: var(--gold-primary);
box-shadow: 0 20px 40px rgba(197, 168, 128, 0.04);
}
.pillar-icon-wrapper {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
margin-bottom: 24px;
transition: var(--transition-fast);
}
.pillar-card:hover .pillar-icon-wrapper {
background: var(--gold-primary);
color: var(--bg-dark);
}
.pillar-card h3 {
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 20px;
border-bottom: 1px solid var(--border-light);
padding-bottom: 12px;
display: flex;
align-items: center;
gap: 12px;
}
.pillar-card h3 span {
font-family: var(--font-heading);
color: var(--gold-primary);
opacity: 0.5;
font-size: 1rem;
}
.pillar-sublist {
list-style: none;
margin-top: 5px;
}
.pillar-sublist li {
position: relative;
padding-left: 20px;
font-size: 0.88rem;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 10px;
transition: var(--transition-fast);
}
.pillar-sublist li:last-child {
margin-bottom: 0;
}
.pillar-sublist li::before {
content: "•";
position: absolute;
left: 4px;
color: var(--gold-primary);
font-size: 1.1rem;
line-height: 1;
}
.pillar-card:hover .pillar-sublist li {
color: var(--text-light);
} .focus-section {
background: var(--bg-dark);
}
.focus-grid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 60px;
align-items: center;
}
.focus-image-wrapper {
position: relative;
border: 1px solid var(--border-light);
background: var(--bg-slate);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
.focus-image-wrapper::before {
content: "";
position: absolute;
inset: -14px;
border: 1px solid var(--border-strong);
z-index: -1;
pointer-events: none;
transform: translate(6px, 6px);
}
.focus-image-wrapper img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
opacity: 0.85;
}
.focus-content h2 {
margin-bottom: 20px;
}
.focus-desc {
font-size: 1.05rem;
margin-bottom: 30px;
line-height: 1.7;
}
.focus-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.focus-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px 24px;
background: var(--bg-slate);
border: 1px solid var(--border-light);
transition: var(--transition-medium);
}
.focus-item:hover {
border-color: var(--gold-primary);
transform: translateX(6px);
}
.focus-item-icon {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
font-size: 0.75rem;
font-weight: bold;
flex-shrink: 0;
margin-top: 2px;
transition: var(--transition-fast);
}
.focus-item:hover .focus-item-icon {
background: var(--gold-primary);
color: var(--bg-dark);
}
.focus-item h4 {
font-family: var(--font-primary);
font-size: 0.95rem;
font-weight: 600;
color: var(--text-white);
margin-bottom: 4px;
}
.focus-item p {
font-size: 0.85rem;
line-height: 1.6;
color: var(--text-muted);
} .values-section {
background: var(--bg-slate);
}
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.value-glass-card {
padding: 36px 30px;
background: rgba(12, 15, 22, 0.6);
border: 1px solid var(--border-light);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: var(--transition-medium);
position: relative;
}
.value-glass-card:hover {
transform: translateY(-5px);
border-color: var(--gold-primary);
box-shadow: 0 15px 30px rgba(197, 168, 128, 0.03);
}
.value-check-icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
color: var(--gold-primary);
border-radius: 50%;
background: rgba(197, 168, 128, 0.08);
margin-bottom: 24px;
font-size: 1.2rem;
font-weight: bold;
transition: var(--transition-fast);
}
.value-glass-card:hover .value-check-icon {
background: var(--gold-primary);
color: var(--bg-dark);
}
.value-glass-card h3 {
font-family: var(--font-primary);
font-size: 0.98rem;
font-weight: 600;
color: var(--text-white);
line-height: 1.5;
}
.brand-signature {
text-align: center;
margin-top: 60px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.25em;
color: var(--gold-primary);
font-weight: 600;
opacity: 0.8;
} @media (max-width: 992px) {
.mna-hero .hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.mna-hero .hero-image-frame {
max-width: 100%;
aspect-ratio: 16/9;
}
.pillars-grid {
grid-template-columns: repeat(2, 1fr);
}
.focus-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.focus-image-wrapper {
max-width: 100%;
}
.values-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.pillars-grid {
grid-template-columns: 1fr;
}
.values-grid {
grid-template-columns: 1fr;
}
.focus-item {
padding: 16px 20px;
}
} .spmc-service-canvas .site-main.spmc-service-page,
.spmc-service-canvas .site-main.spmc-service-page article,
.spmc-service-canvas .site-main.spmc-service-page .entry-content {
background: var(--bg-dark);
color: var(--text-light);
margin: 0;
padding: 0;
border: 0;
}
.spmc-service-page .hero-grid { width: 100%; }
.spmc-service-page .section:first-child { margin-top: 0; }
.spmc-service-page a.btn,
.spmc-service-page button.btn { text-decoration: none; }
@media (max-width: 1120px) {
.taichinh-hero .hero-grid,
.mna-hero .hero-grid,
.nhansu-hero .hero-grid,
.thuxepvon-hero .hero-grid,
.toiuu-hero .hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.taichinh-hero .hero-image-frame,
.mna-hero .hero-image-frame,
.nhansu-hero .hero-image-frame,
.thuxepvon-hero .hero-image-frame,
.toiuu-hero .hero-image-frame {
max-width: 520px;
aspect-ratio: 16/10;
margin-inline: auto;
}
}
@media (max-width: 860px) {
.taichinh-hero,
.mna-hero,
.nhansu-hero,
.thuxepvon-hero,
.toiuu-hero {
padding: 120px 0 64px;
}
}
@media (max-width: 620px) {
.fin-services-grid,
.pillars-grid,
.values-grid {
grid-template-columns: 1fr;
}
}  main#primary.spmc-service-page,
#primary.spmc-service-page,
.site-main.spmc-service-page,
body .site-main.spmc-service-page {
float: none !important;
clear: both !important;
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
left: auto !important;
right: auto !important;
transform: none !important;
overflow-x: clip !important;
box-sizing: border-box !important;
}
body.spmc-service-canvas #content,
body.spmc-service-canvas .site-content,
body.spmc-service-canvas .ast-container,
body.spmc-service-canvas .content-area,
body.spmc-service-canvas main#primary,
body.spmc-service-canvas #primary {
float: none !important;
clear: both !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: clip !important;
box-sizing: border-box !important;
}
.spmc-service-page .section,
.spmc-service-page section[class*="-hero"],
.spmc-service-page .final-cta {
position: relative;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
left: auto !important;
right: auto !important;
transform: none !important;
overflow-x: clip;
box-sizing: border-box !important;
}
.spmc-service-page .container,
.spmc-service-page .hero-grid,
.spmc-service-page .hero-grid-wrapper,
.spmc-service-page .cta-capsule {
max-width: min(var(--container-width), calc(100vw - 48px)) !important;
width: min(100% - 48px, var(--container-width)) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.spmc-service-page .hero-grid,
.spmc-service-page .hero-grid-wrapper {
min-width: 0 !important;
}
.spmc-service-page .hero-content,
.spmc-service-page .hero-media-wrapper,
.spmc-service-page .hero-image-frame {
min-width: 0 !important;
max-width: 100% !important;
}
.spmc-service-page img,
.spmc-service-page svg {
max-width: 100%;
}
@supports not (overflow-x: clip) {
main#primary.spmc-service-page,
#primary.spmc-service-page,
.site-main.spmc-service-page,
.spmc-service-page .section,
.spmc-service-page section[class*="-hero"] {
overflow-x: hidden !important;
}
}
@media (max-width: 620px) {
.spmc-service-page .container,
.spmc-service-page .hero-grid,
.spmc-service-page .hero-grid-wrapper,
.spmc-service-page .cta-capsule {
max-width: calc(100vw - 24px) !important;
width: calc(100% - 24px) !important;
}
}   .spmc-about-page .about-hero {
position: relative;
padding: 160px 0 100px;
background: var(--bg-dark);
border-bottom: 1px solid var(--border-light);
}
.spmc-about-page .about-hero .hero-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 60px;
align-items: center;
}
.spmc-about-page .about-hero .hero-content {
max-width: 680px;
}
.spmc-about-page .about-hero h1 {
font-size: clamp(2.2rem, 4vw, 3.4rem);
margin-bottom: 20px;
font-family: var(--font-heading);
}
.spmc-about-page .about-hero .hero-subtitle {
font-size: 1.02rem;
line-height: 1.7;
color: var(--text-muted);
}
.spmc-about-page .about-hero .hero-image-frame {
position: relative;
width: 100%;
aspect-ratio: 4/5;
background: var(--bg-slate);
border: 1px solid var(--border-light);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.spmc-about-page .about-hero .hero-image-frame img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
filter: grayscale(0.2) contrast(1.1);
}
.spmc-about-page .about-hero .image-mask {
position: absolute;
inset: 0;
background: linear-gradient(30deg, var(--bg-dark) 5%, transparent 60%);
pointer-events: none;
} .spmc-about-page .vision-mission-section {
background: var(--bg-slate);
}
.spmc-about-page .vision-mission-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
margin-top: 40px;
}
.spmc-about-page .vm-card {
padding: 44px 36px;
background: var(--bg-dark);
border: 1px solid var(--border-light);
transition: var(--transition-medium);
}
.spmc-about-page .vm-card:hover {
border-color: var(--gold-primary);
transform: translateY(-4px);
box-shadow: 0 15px 30px rgba(197, 168, 128, 0.04);
}
.spmc-about-page .vm-icon-wrapper {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
margin-bottom: 24px;
transition: var(--transition-fast);
}
.spmc-about-page .vm-card:hover .spmc-about-page .vm-icon-wrapper {
background: var(--gold-primary);
color: var(--bg-dark);
}
.spmc-about-page .vm-card h3 {
font-size: 1.4rem;
font-weight: 500;
margin-bottom: 16px;
font-family: var(--font-heading);
}
.spmc-about-page .vm-card p {
font-size: 0.92rem;
line-height: 1.7;
color: var(--text-muted);
} .spmc-about-page .values-section {
background: var(--bg-dark);
}
.spmc-about-page .values-list-wrapper {
display: flex;
flex-direction: column;
margin-top: 40px;
}
.spmc-about-page .value-row {
display: grid;
grid-template-columns: 80px 1fr;
align-items: flex-start;
padding: 32px 0;
border-bottom: 1px solid var(--border-light);
transition: var(--transition-medium);
}
.spmc-about-page .value-row:last-child {
border-bottom: none;
}
.spmc-about-page .value-row:hover {
transform: translateX(10px);
}
.spmc-about-page .value-number {
font-family: var(--font-heading);
font-size: 1.8rem;
color: var(--gold-primary);
opacity: 0.4;
font-weight: 600;
transition: var(--transition-fast);
}
.spmc-about-page .value-row:hover .spmc-about-page .value-number {
opacity: 1;
}
.spmc-about-page .value-content h3 {
font-size: 1.15rem;
font-weight: 600;
color: var(--text-white);
margin-bottom: 8px;
}
.spmc-about-page .value-content p {
font-size: 0.9rem;
color: var(--text-muted);
line-height: 1.6;
} .spmc-about-page .history-section {
background: var(--bg-slate);
}
.spmc-about-page .timeline-wrapper {
position: relative;
max-width: 800px;
margin: 50px auto 0;
padding-left: 40px;
}
.spmc-about-page .timeline-wrapper::before {
content: "";
position: absolute;
left: 8px;
top: 5px;
bottom: 5px;
width: 1px;
background: var(--border-strong);
}
.spmc-about-page .timeline-item {
position: relative;
margin-bottom: 40px;
}
.spmc-about-page .timeline-item:last-child {
margin-bottom: 0;
}
.spmc-about-page .timeline-dot {
position: absolute;
left: -39px;
top: 4px;
width: 15px;
height: 15px;
border: 2px solid var(--gold-primary);
background: var(--bg-slate);
border-radius: 50%;
z-index: 2;
transition: var(--transition-fast);
}
.spmc-about-page .timeline-item:hover .spmc-about-page .timeline-dot {
background: var(--gold-primary);
box-shadow: 0 0 10px var(--gold-primary);
}
.spmc-about-page .timeline-content {
padding: 30px;
background: rgba(12, 15, 22, 0.6);
border: 1px solid var(--border-light);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: var(--transition-medium);
}
.spmc-about-page .timeline-item:hover .spmc-about-page .timeline-content {
border-color: var(--gold-primary);
}
.spmc-about-page .timeline-year {
font-family: var(--font-heading);
font-size: 1.35rem;
font-weight: bold;
color: var(--gold-primary);
margin-bottom: 10px;
display: inline-block;
}
.spmc-about-page .timeline-content h4 {
font-size: 1.05rem;
margin-bottom: 8px;
color: var(--text-white);
font-weight: 600;
}
.spmc-about-page .timeline-content p {
font-size: 0.88rem;
line-height: 1.6;
color: var(--text-muted);
} .spmc-about-page .team-section {
background: var(--bg-dark);
}
.spmc-about-page .team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.spmc-about-page .team-card {
background: var(--bg-slate);
border: 1px solid var(--border-light);
transition: var(--transition-medium);
display: flex;
flex-direction: column;
overflow: hidden;
}
.spmc-about-page .team-card:hover {
border-color: var(--gold-primary);
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}
.spmc-about-page .team-image-box {
position: relative;
width: 100%;
aspect-ratio: 1/1;
background: var(--bg-dark);
overflow: hidden;
border-bottom: 1px solid var(--border-light);
}
.spmc-about-page .team-image-box img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.75;
filter: grayscale(1) contrast(1.05);
transition: var(--transition-medium);
}
.spmc-about-page .team-card:hover .spmc-about-page .team-image-box img {
opacity: 0.95;
filter: grayscale(0) contrast(1);
transform: scale(1.02);
}
.spmc-about-page .team-info {
padding: 30px 24px;
text-align: center;
}
.spmc-about-page .team-info h3 {
font-size: 1.25rem;
font-family: var(--font-heading);
color: var(--gold-primary);
margin-bottom: 6px;
font-weight: 500;
}
.spmc-about-page .team-title {
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 16px;
}
.spmc-about-page .team-bio {
font-size: 0.88rem;
line-height: 1.6;
color: var(--text-muted);
} @media (max-width: 992px) {
.spmc-about-page .about-hero .hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.spmc-about-page .about-hero .hero-image-frame {
aspect-ratio: 16/9;
}
.spmc-about-page .vision-mission-grid {
grid-template-columns: 1fr;
}
.spmc-about-page .team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.spmc-about-page .team-grid {
grid-template-columns: 1fr;
}
.spmc-about-page .value-row {
grid-template-columns: 50px 1fr;
padding: 24px 0;
}
.spmc-about-page .value-number {
font-size: 1.4rem;
}
} .spmc-contact-page .contact-hero {
position: relative;
padding: 160px 0 80px;
background: var(--bg-dark);
border-bottom: 1px solid var(--border-light);
}
.spmc-contact-page .contact-hero .hero-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 60px;
align-items: center;
}
.spmc-contact-page .contact-hero .hero-content {
max-width: 680px;
}
.spmc-contact-page .contact-hero h1 {
font-size: clamp(2.2rem, 4vw, 3.4rem);
margin-bottom: 20px;
font-family: var(--font-heading);
}
.spmc-contact-page .contact-hero .hero-subtitle {
font-size: 1.02rem;
line-height: 1.7;
color: var(--text-muted);
} .spmc-contact-page .contact-main-section {
background: var(--bg-slate);
}
.spmc-contact-page .contact-main-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 60px;
align-items: start;
} .spmc-contact-page .contact-info-col {
display: flex;
flex-direction: column;
gap: 40px;
}
.spmc-contact-page .contact-info-block h3 {
font-family: var(--font-heading);
font-size: 1.35rem;
font-weight: 500;
margin-bottom: 24px;
border-bottom: 1px solid var(--border-light);
padding-bottom: 12px;
}
.spmc-contact-page .contact-details-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.spmc-contact-page .contact-detail-item {
display: flex;
align-items: flex-start;
gap: 20px;
}
.spmc-contact-page .contact-detail-icon {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
color: var(--gold-primary);
flex-shrink: 0;
transition: var(--transition-fast);
}
.spmc-contact-page .contact-detail-item:hover .spmc-contact-page .contact-detail-icon {
background: var(--gold-primary);
color: var(--bg-dark);
}
.spmc-contact-page .contact-detail-text h4 {
font-family: var(--font-primary);
font-size: 0.88rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-bottom: 6px;
}
.spmc-contact-page .contact-detail-text p {
font-size: 0.95rem;
color: var(--text-white);
line-height: 1.5;
}
.spmc-contact-page .contact-detail-text p strong {
color: var(--gold-primary);
} .spmc-contact-page .spmc-contact-page .contact-form-col {
background: rgba(12, 15, 22, 0.6);
border: 1px solid var(--border-light);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 44px 36px;
transition: var(--transition-medium);
}
.spmc-contact-page .spmc-contact-page .contact-form-col:hover {
border-color: var(--gold-primary);
}
.spmc-contact-page .spmc-contact-page .contact-form-col h3 {
font-family: var(--font-heading);
font-size: 1.45rem;
font-weight: 500;
margin-bottom: 8px;
}
.spmc-contact-page .spmc-contact-page .contact-form-col .form-desc {
font-size: 0.88rem;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 30px;
}
.spmc-contact-page .contact-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.spmc-contact-page .contact-form label {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
font-weight: 600;
}
.spmc-contact-page .contact-form input,
.spmc-contact-page .contact-form select,
.spmc-contact-page .contact-form textarea {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-strong);
color: var(--text-white);
padding: 14px 16px;
font-family: var(--font-primary);
font-size: 0.9rem;
transition: var(--transition-fast);
}
.spmc-contact-page .contact-form input:focus,
.spmc-contact-page .contact-form select:focus,
.spmc-contact-page .contact-form textarea:focus {
outline: none;
border-color: var(--gold-primary);
background: rgba(255, 255, 255, 0.04);
}
.spmc-contact-page .contact-form textarea {
resize: vertical;
min-height: 120px;
}
.spmc-contact-page .contact-form .btn-submit {
margin-top: 10px;
width: 100%;
}
.spmc-contact-page .spmc-contact-page .contact-form-message {
font-size: 0.9rem;
line-height: 1.5;
margin-top: 16px;
color: var(--gold-primary);
} .spmc-contact-page .map-section {
background: var(--bg-dark);
padding: 60px 0 0;
}
.spmc-contact-page .map-container {
width: 100%;
height: 450px;
border: 1px solid var(--border-light);
overflow: hidden;
position: relative;
background: var(--bg-slate);
}
.spmc-contact-page .map-container iframe {
width: 100%;
height: 100%;
border: none;
filter: grayscale(1) invert(0.9) contrast(1.2);
opacity: 0.8;
} @media (max-width: 992px) {
.spmc-contact-page .contact-hero .hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.spmc-contact-page .contact-main-grid {
grid-template-columns: 1fr;
gap: 50px;
}
}
@media (max-width: 768px) {
.spmc-contact-page .spmc-contact-page .contact-form-col {
padding: 30px 24px;
}
.spmc-contact-page .map-container {
height: 350px;
}
} .spmc-contact-page .spmc-contact-form-shortcode {
margin-top: 8px;
}
.spmc-contact-page .spmc-contact-form-shortcode .spmc-form-shell {
padding: 0;
border: 0;
background: transparent;
}
.spmc-contact-page .spmc-contact-form-shortcode .spmc-form-fallback {
padding: 22px;
border: 1px solid var(--border-strong);
background: rgba(255,255,255,0.02);
color: var(--text-muted);
}
.spmc-contact-page .spmc-contact-form-shortcode .spmc-form-fallback strong {
display: block;
margin-bottom: 8px;
color: var(--gold-primary);
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 500;
}
.spmc-contact-page .spmc-contact-form-shortcode .spmc-form-fallback a {
color: var(--gold-primary);
font-weight: 600;
} .spmc-about-page,
.spmc-contact-page {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
background: var(--bg-dark);
overflow-x: clip;
}
.spmc-about-page .section,
.spmc-contact-page .section {
width: 100%;
max-width: 100vw;
} .spmc-demo-main-nav {
display: flex;
align-items: center;
gap: 32px;
}
.spmc-demo-main-nav > a,
.spmc-demo-main-nav .mega-trigger {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 40px;
color: var(--text-muted);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.03em;
white-space: nowrap;
}
.spmc-demo-main-nav > a:hover,
.spmc-demo-main-nav > a:focus-visible,
.spmc-demo-main-nav .mega-trigger:hover,
.spmc-demo-main-nav .mega-trigger:focus-visible {
color: var(--gold-primary);
outline: none;
}
.spmc-demo-main-nav > .nav-item {
position: relative;
display: inline-flex;
align-items: center;
min-height: 40px;
} .spmc-demo-main-nav > .nav-item.has-mega::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
width: min(720px, calc(100vw - 40px));
height: 28px;
transform: translateX(-50%);
z-index: 1099;
display: none;
pointer-events: auto;
}
.spmc-demo-main-nav > .nav-item.has-mega:hover::after,
.spmc-demo-main-nav > .nav-item.has-mega:focus-within::after,
.spmc-demo-main-nav > .nav-item.has-mega.is-open::after {
display: block;
}
.spmc-demo-main-nav .mega-trigger span {
color: currentColor;
font-size: 0.75rem;
line-height: 1;
transform: translateY(1px);
}
.spmc-demo-main-nav .mega-menu {
position: absolute;
top: calc(100% + 18px);
left: 50%;
z-index: 1100;
width: min(720px, calc(100vw - 40px));
padding: 24px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
background: var(--bg-slate);
border: 1px solid var(--border-light);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-50%) translateY(10px);
transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s linear 0.18s;
}
.spmc-demo-main-nav .has-mega:hover .mega-menu,
.spmc-demo-main-nav .has-mega:focus-within .mega-menu,
.spmc-demo-main-nav .has-mega.is-open .mega-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
transition-delay: 0s;
}
.spmc-demo-main-nav .mega-col {
padding: 16px;
border-left: 1px solid var(--border-light);
}
.spmc-demo-main-nav .mega-col:first-child {
border-left: none;
}
.spmc-demo-main-nav .mega-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
color: var(--gold-primary);
}
.spmc-demo-main-nav .mega-svg {
width: 18px;
height: 18px;
flex: 0 0 18px;
}
.spmc-demo-main-nav .mega-col h4 {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
font-family: var(--font-heading);
color: var(--text-white);
}
.spmc-demo-main-nav .mega-col a {
display: block;
min-height: auto;
padding: 4px 0;
color: var(--text-muted);
font-size: 0.82rem;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0;
white-space: normal;
}
.spmc-demo-main-nav .mega-col a:hover,
.spmc-demo-main-nav .mega-col a:focus-visible {
color: var(--text-white);
transform: translateX(3px);
}
@media (max-width: 1120px) {
.spmc-demo-main-nav {
gap: 22px;
}
}
@media (max-width: 860px) {
.spmc-demo-main-nav {
position: fixed;
top: var(--spmc-admin-bar-height, 0px);
right: 0;
left: auto;
z-index: 1001;
width: min(92vw, 390px);
height: calc(100dvh - var(--spmc-admin-bar-height, 0px));
min-height: calc(100vh - var(--spmc-admin-bar-height, 0px));
padding: 96px 24px 32px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
overflow-y: auto;
background: rgba(8, 10, 15, 0.98);
border-left: 1px solid var(--border-light);
transform: translateX(100%);
transition: transform 0.35s ease-out;
}
.spmc-demo-main-nav.is-open {
transform: translateX(0);
}
.spmc-demo-main-nav > a,
.spmc-demo-main-nav .mega-trigger {
width: 100%;
min-height: 52px;
justify-content: space-between;
padding: 16px 0;
border-bottom: 1px solid var(--border-light);
font-size: 1rem;
text-align: left;
}
.spmc-demo-main-nav > .nav-item {
display: block;
width: 100%;
min-height: 0;
}
.spmc-demo-main-nav > .nav-item.has-mega::after {
display: none !important;
}
.spmc-demo-main-nav .mega-menu {
position: static;
width: 100%;
display: none;
grid-template-columns: 1fr;
gap: 0;
padding: 10px 0 16px;
background: transparent;
border: 0;
box-shadow: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition: none;
}
.spmc-demo-main-nav .has-mega.is-open .mega-menu {
display: grid;
}
.spmc-demo-main-nav .mega-col,
.spmc-demo-main-nav .mega-col:first-child {
padding: 12px 0 14px 18px;
border-left: 0;
border-bottom: 1px solid var(--border-light);
}
.spmc-demo-main-nav .mega-col:last-child {
border-bottom: 0;
}
.spmc-demo-main-nav .mega-col a {
padding: 6px 0;
border-bottom: 0;
font-size: 0.9rem;
}
} .spmc-demo-main-nav > a.active,
.spmc-demo-main-nav > a[aria-current="page"],
.spmc-demo-main-nav > .nav-item.is-current > .mega-trigger,
.spmc-demo-main-nav .mega-col a.active,
.spmc-demo-main-nav .mega-col a[aria-current="page"] {
color: var(--gold-primary);
}
.spmc-demo-main-nav .mega-col-flat {
min-width: 220px;
}
@media (min-width: 861px) {
.spmc-demo-main-nav .mega-menu:has(.mega-col-flat:only-child) {
width: min(320px, calc(100vw - 40px));
grid-template-columns: 1fr;
}
} @media (min-width: 861px) {
.spmc-demo-main-nav .mega-menu {
width: min(760px, calc(100vw - 40px));
padding: 18px;
gap: 0;
align-items: stretch;
}
.spmc-demo-main-nav > .nav-item.has-mega::after {
width: min(760px, calc(100vw - 40px));
}
.spmc-demo-main-nav .mega-col {
display: flex;
flex-direction: column;
min-width: 0;
padding: 18px 20px;
border-left: 1px solid var(--border-light);
}
.spmc-demo-main-nav .mega-col:first-child {
border-left: 0;
}
.spmc-demo-main-nav .mega-header {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
align-items: center;
column-gap: 10px;
min-height: 34px;
margin: 0 0 12px;
padding: 0 0 12px;
border-bottom: 1px solid var(--border-light);
}
.spmc-demo-main-nav .mega-svg {
width: 20px;
height: 20px;
justify-self: center;
}
.spmc-demo-main-nav .mega-col h4 {
min-width: 0;
margin: 0;
font-size: 0.98rem;
line-height: 1.2;
white-space: nowrap;
}
.spmc-demo-main-nav .mega-col a {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 40px;
margin: 0 0 4px;
padding: 9px 12px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: var(--text-muted);
font-size: 0.84rem;
font-weight: 500;
line-height: 1.35;
letter-spacing: 0.01em;
text-align: left;
white-space: normal;
transform: none !important;
}
.spmc-demo-main-nav .mega-col a::after {
content: "→";
flex: 0 0 auto;
margin-left: 12px;
color: var(--gold-primary);
opacity: 0;
transform: translateX(-4px);
transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.spmc-demo-main-nav .mega-col a:hover,
.spmc-demo-main-nav .mega-col a:focus-visible {
color: var(--gold-light);
background: rgba(197, 168, 128, 0.065);
border-color: rgba(197, 168, 128, 0.24);
box-shadow: inset 2px 0 0 var(--gold-primary);
outline: none;
}
.spmc-demo-main-nav .mega-col a:hover::after,
.spmc-demo-main-nav .mega-col a:focus-visible::after,
.spmc-demo-main-nav .mega-col a.active::after,
.spmc-demo-main-nav .mega-col a[aria-current="page"]::after {
opacity: 1;
transform: translateX(0);
}
.spmc-demo-main-nav .mega-col a.active,
.spmc-demo-main-nav .mega-col a[aria-current="page"] {
color: var(--gold-primary);
background: rgba(197, 168, 128, 0.055);
border-color: rgba(197, 168, 128, 0.2);
box-shadow: inset 2px 0 0 var(--gold-primary);
}
}
@media (max-width: 860px) {
.spmc-demo-main-nav .mega-header {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.spmc-demo-main-nav .mega-col a {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 42px;
padding: 9px 12px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
transform: none !important;
}
.spmc-demo-main-nav .mega-col a:hover,
.spmc-demo-main-nav .mega-col a:focus-visible,
.spmc-demo-main-nav .mega-col a.active,
.spmc-demo-main-nav .mega-col a[aria-current="page"] {
color: var(--gold-light);
background: rgba(197, 168, 128, 0.065);
border-color: rgba(197, 168, 128, 0.22);
outline: none;
}
} @media (min-width: 861px) {
.spmc-demo-main-nav .mega-menu {
width: min(980px, calc(100vw - 32px));
max-width: calc(100vw - 32px);
grid-template-columns: repeat(3, minmax(0, 1fr));
overflow: visible;
}
.spmc-demo-main-nav > .nav-item.has-mega::after {
width: min(980px, calc(100vw - 32px));
max-width: calc(100vw - 32px);
}
.spmc-demo-main-nav .mega-menu:has(.mega-col-flat:only-child) {
width: min(420px, calc(100vw - 32px));
grid-template-columns: 1fr;
}
.spmc-demo-main-nav .mega-col {
min-width: 0;
overflow: hidden;
}
.spmc-demo-main-nav .mega-header,
.spmc-demo-main-nav .mega-header h4 {
min-width: 0;
max-width: 100%;
}
.spmc-demo-main-nav .mega-header h4 {
white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
}
.spmc-demo-main-nav .mega-col a {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-width: 0;
max-width: 100%;
min-height: 42px;
height: auto;
overflow: hidden;
}
.spmc-demo-main-nav .mega-col a .mega-link-text {
display: block;
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: normal;
hyphens: auto;
}
.spmc-demo-main-nav .mega-col a::after {
grid-column: 2;
grid-row: 1;
align-self: center;
margin-left: 0;
}
}
@media (min-width: 861px) and (max-width: 1120px) {
.spmc-demo-main-nav .mega-menu {
width: min(920px, calc(100vw - 24px));
padding: 16px;
}
.spmc-demo-main-nav > .nav-item.has-mega::after {
width: min(920px, calc(100vw - 24px));
}
.spmc-demo-main-nav .mega-col {
padding-inline: 14px;
}
.spmc-demo-main-nav .mega-col a {
padding-inline: 10px;
font-size: 0.82rem;
}
}
@media (max-width: 860px) {
.spmc-demo-main-nav,
.spmc-demo-main-nav .mega-menu,
.spmc-demo-main-nav .mega-col,
.spmc-demo-main-nav .mega-col a {
max-width: 100%;
}
.spmc-demo-main-nav .mega-col a {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
white-space: normal;
overflow: hidden;
}
.spmc-demo-main-nav .mega-col a .mega-link-text,
.spmc-demo-main-nav .mega-col a {
min-width: 0;
overflow-wrap: anywhere;
word-break: normal;
}
} .spmc-service-page .hero-quote-box {
margin: 28px 0 !important;
padding: 22px 26px !important;
border-left: 2px solid var(--gold-primary) !important;
background: rgba(197, 168, 128, 0.03) !important;
box-sizing: border-box !important;
}
.spmc-service-page .hero-quote-box blockquote,
.spmc-service-page .hero-quote-box blockquote.wp-block-quote {
margin: 0 0 10px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
text-indent: 0 !important;
max-width: 100% !important;
}
.spmc-service-page .hero-quote-box blockquote::before,
.spmc-service-page .hero-quote-box blockquote::after {
display: none !important;
content: none !important;
}
.spmc-service-page .hero-quote-box blockquote p {
margin: 0 !important;
padding: 0 !important;
}
.spmc-service-page .hero-quote-box cite {
display: block !important;
margin-top: 10px !important;
}
.spmc-service-page .pillars-section .container,
.spmc-service-page .strategy-section .container,
.spmc-service-page .fin-services-section .container,
.spmc-service-page .values-section .container,
.spmc-service-page .focus-section .container,
.spmc-service-page .process-section .container,
.spmc-service-page .benefits-section .container,
.spmc-service-page .industry-section .container,
.spmc-service-page .sector-section .container,
.spmc-service-page .cta-section .container {
padding-left: 0 !important;
padding-right: 0 !important;
}
.spmc-service-page .pillars-grid,
.spmc-service-page .strategy-grid,
.spmc-service-page .fin-services-grid,
.spmc-service-page .values-grid,
.spmc-service-page .benefits-grid,
.spmc-service-page .industry-grid,
.spmc-service-page .sector-grid,
.spmc-service-page .team-grid {
width: 100% !important;
max-width: 100% !important;
margin: 38px auto 0 !important;
padding: 0 !important;
display: grid !important;
gap: 30px !important;
align-items: stretch !important;
grid-auto-rows: 1fr !important;
box-sizing: border-box !important;
}
.spmc-service-page .pillars-grid,
.spmc-service-page .strategy-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.spmc-service-page .fin-services-grid,
.spmc-service-page .values-grid,
.spmc-service-page .benefits-grid,
.spmc-service-page .industry-grid,
.spmc-service-page .sector-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.spmc-service-page .pillar-card,
.spmc-service-page .strategy-card,
.spmc-service-page .fin-service-card,
.spmc-service-page .value-card,
.spmc-service-page .benefit-card,
.spmc-service-page .industry-card,
.spmc-service-page .sector-card,
.spmc-service-page .team-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
.spmc-service-page .pillar-card h3,
.spmc-service-page .strategy-card h3,
.spmc-service-page .fin-service-card h3,
.spmc-service-page .value-card h3,
.spmc-service-page .benefit-card h3,
.spmc-service-page .industry-card h3,
.spmc-service-page .sector-card h3 {
width: 100% !important;
min-width: 0 !important;
overflow-wrap: anywhere !important;
}
.spmc-service-page .pillar-sublist,
.spmc-service-page .value-list,
.spmc-service-page .benefits-list,
.spmc-service-page .focus-list {
width: 100% !important;
margin-left: 0 !important;
padding-left: 0 !important;
}
.spmc-service-page .pillar-sublist li,
.spmc-service-page .value-list li,
.spmc-service-page .benefits-list li,
.spmc-service-page .focus-list li {
max-width: 100% !important;
overflow-wrap: anywhere !important;
}
.spmc-service-page .focus-grid,
.spmc-service-page .contact-main-grid,
.spmc-service-page .vision-mission-grid {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
align-items: stretch !important;
box-sizing: border-box !important;
}
.spmc-service-page .section-heading.center {
margin-left: auto !important;
margin-right: auto !important;
}
@media (max-width: 1120px) {
.spmc-service-page .pillars-grid,
.spmc-service-page .strategy-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 860px) {
.spmc-service-page .hero-quote-box {
margin: 24px 0 !important;
padding: 20px 22px !important;
}
.spmc-service-page .pillars-grid,
.spmc-service-page .strategy-grid,
.spmc-service-page .fin-services-grid,
.spmc-service-page .values-grid,
.spmc-service-page .benefits-grid,
.spmc-service-page .industry-grid,
.spmc-service-page .sector-grid,
.spmc-service-page .team-grid {
gap: 22px !important;
grid-template-columns: 1fr !important;
}
}
@media (max-width: 620px) {
.spmc-service-page .hero-quote-box {
padding: 18px 18px !important;
}
} .spmc-service-page.spmc-service-mna-page .pillars-section > .container,
.spmc-service-page.spmc-service-mna-page .focus-section > .container,
body.spmc-service-canvas .spmc-service-page.spmc-service-mna-page .container.focus-grid {
width: min(100% - 48px, var(--container-width)) !important;
max-width: var(--container-width) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.spmc-service-page.spmc-service-mna-page .pillars-grid {
width: 100% !important;
max-width: 100% !important;
margin: 40px auto 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 30px !important;
align-items: stretch !important;
}
.spmc-service-page.spmc-service-mna-page .pillar-card {
padding: clamp(30px, 3vw, 40px) clamp(24px, 2.6vw, 32px) !important;
background: var(--bg-dark) !important;
border: 1px solid var(--border-light) !important;
box-sizing: border-box !important;
min-width: 0 !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0 !important;
}
.spmc-service-page.spmc-service-mna-page .pillar-card > * {
max-width: 100% !important;
box-sizing: border-box !important;
}
.spmc-service-page.spmc-service-mna-page .pillar-card h3 {
width: 100% !important;
margin: 0 0 18px !important;
padding: 0 0 14px !important;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) !important;
align-items: start !important;
gap: 10px !important;
border-bottom: 1px solid var(--border-light) !important;
line-height: 1.35 !important;
}
.spmc-service-page.spmc-service-mna-page .pillar-sublist {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.spmc-service-page.spmc-service-mna-page .pillar-sublist li {
position: relative !important;
width: 100% !important;
margin: 0 0 10px !important;
padding-left: 22px !important;
color: var(--text-muted) !important;
line-height: 1.6 !important;
overflow-wrap: anywhere !important;
}
.spmc-service-page.spmc-service-mna-page .pillar-sublist li:last-child {
margin-bottom: 0 !important;
}
.spmc-service-page.spmc-service-mna-page .pillar-sublist li::before {
left: 2px !important;
top: 0.1em !important;
}
.spmc-service-page.spmc-service-mna-page .focus-section {
overflow-x: clip !important;
}
.spmc-service-page.spmc-service-mna-page .container.focus-grid,
.spmc-service-page.spmc-service-mna-page .focus-grid.container {
display: grid !important;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
gap: 60px !important;
align-items: center !important;
}
.spmc-service-page.spmc-service-mna-page .focus-image-wrapper,
.spmc-service-page.spmc-service-mna-page .focus-content {
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.spmc-service-page.spmc-service-mna-page .focus-content {
padding-left: 0 !important;
padding-right: 0 !important;
}
.spmc-service-page.spmc-service-mna-page .focus-list {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.spmc-service-page.spmc-service-mna-page .focus-item {
width: 100% !important;
margin: 0 !important;
padding: 20px 24px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: flex-start !important;
gap: 20px !important;
}
.spmc-service-page.spmc-service-mna-page .focus-item > div:last-child {
min-width: 0 !important;
max-width: 100% !important;
}
@media (max-width: 1120px) {
.spmc-service-page.spmc-service-mna-page .pillars-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 992px) {
.spmc-service-page.spmc-service-mna-page .container.focus-grid,
.spmc-service-page.spmc-service-mna-page .focus-grid.container {
grid-template-columns: 1fr !important;
gap: 40px !important;
}
}
@media (max-width: 860px) {
.spmc-service-page.spmc-service-mna-page .pillars-grid {
grid-template-columns: 1fr !important;
gap: 22px !important;
}
.spmc-service-page.spmc-service-mna-page .pillar-card {
padding: 28px 24px !important;
}
.spmc-service-page.spmc-service-mna-page .focus-item {
padding: 18px 20px !important;
}
}
@media (max-width: 620px) {
.spmc-service-page.spmc-service-mna-page .pillars-section > .container,
.spmc-service-page.spmc-service-mna-page .focus-section > .container,
body.spmc-service-canvas .spmc-service-page.spmc-service-mna-page .container.focus-grid {
width: calc(100% - 24px) !important;
max-width: calc(100vw - 24px) !important;
}
.spmc-service-page.spmc-service-mna-page .pillar-card {
padding: 24px 20px !important;
}
.spmc-service-page.spmc-service-mna-page .focus-item {
padding: 16px 18px !important;
gap: 14px !important;
}
} .spmc-service-page .strategy-hero .hero-quote-box,
.spmc-service-page .cashflow-hero .hero-quote-box,
.spmc-service-page .fundraising-hero .hero-quote-box,
.spmc-service-page .thuxepvon-hero .hero-quote-box,
.spmc-service-page .toiuu-hero .hero-quote-box,
.spmc-service-page .nhansu-hero .hero-quote-box,
.spmc-service-page .mna-hero .hero-quote-box,
.spmc-service-page .hero-quote-box {
margin: 28px 0 !important;
padding: 22px 26px !important;
border-left: 2px solid var(--gold-primary) !important;
background: rgba(197, 168, 128, 0.03) !important;
box-sizing: border-box !important;
}
.spmc-service-page .hero-quote-box blockquote,
.spmc-service-page .hero-quote-box blockquote.wp-block-quote,
.spmc-service-page blockquote.hero-quote,
.spmc-service-page .hero-quote-box blockquote p {
margin: 0 !important;
margin-inline-start: 0 !important;
margin-inline-end: 0 !important;
padding: 0 !important;
padding-inline-start: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
text-indent: 0 !important;
max-width: 100% !important;
}
.spmc-service-page .hero-quote-box cite {
display: block !important;
margin-top: 10px !important;
} .spmc-service-page .pillars-section > .container,
.spmc-service-page .focus-section > .container,
.spmc-service-page .strategy-section > .container,
.spmc-service-page .fin-services-section > .container,
.spmc-service-page .fundraising-section > .container,
.spmc-service-page .mna-section > .container,
.spmc-service-page .process-section > .container,
.spmc-service-page .benefits-section > .container,
.spmc-service-page .industry-section > .container,
.spmc-service-page .sector-section > .container,
.spmc-service-page .team-section > .container,
.spmc-service-page .vision-mission-section > .container,
.spmc-service-page .values-section > .container,
.spmc-service-page .history-section > .container,
.spmc-service-page .contact-main-section > .container,
.spmc-service-page .section > .container.focus-grid,
.spmc-service-page .container.focus-grid,
.spmc-service-page .focus-grid.container {
width: min(100% - 48px, var(--container-width)) !important;
max-width: var(--container-width) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
} .spmc-service-page .pillar-card,
.spmc-service-page .strategy-card,
.spmc-service-page .fin-service-card,
.spmc-service-page .value-card,
.spmc-service-page .benefit-card,
.spmc-service-page .industry-card,
.spmc-service-page .sector-card,
.spmc-service-page .vm-card {
padding: clamp(30px, 3vw, 40px) clamp(24px, 2.6vw, 32px) !important;
box-sizing: border-box !important;
min-width: 0 !important;
max-width: 100% !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
.spmc-service-page .pillars-grid,
.spmc-service-page .strategy-grid,
.spmc-service-page .fin-services-grid,
.spmc-service-page .values-grid,
.spmc-service-page .benefits-grid,
.spmc-service-page .industry-grid,
.spmc-service-page .sector-grid,
.spmc-service-page .vision-mission-grid,
.spmc-service-page .team-grid {
width: 100% !important;
max-width: 100% !important;
margin: 40px auto 0 !important;
padding: 0 !important;
display: grid !important;
gap: 30px !important;
align-items: stretch !important;
box-sizing: border-box !important;
}
.spmc-service-page .pillars-grid,
.spmc-service-page .strategy-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.spmc-service-page .fin-services-grid,
.spmc-service-page .values-grid,
.spmc-service-page .benefits-grid,
.spmc-service-page .industry-grid,
.spmc-service-page .sector-grid,
.spmc-service-page .vision-mission-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.spmc-service-page .pillar-card > *,
.spmc-service-page .strategy-card > *,
.spmc-service-page .fin-service-card > *,
.spmc-service-page .value-card > *,
.spmc-service-page .benefit-card > *,
.spmc-service-page .industry-card > *,
.spmc-service-page .sector-card > *,
.spmc-service-page .vm-card > * {
max-width: 100% !important;
box-sizing: border-box !important;
}
.spmc-service-page .pillar-card h3 {
width: 100% !important;
margin: 0 0 18px !important;
padding: 0 0 14px !important;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) !important;
align-items: start !important;
gap: 10px !important;
border-bottom: 1px solid var(--border-light) !important;
line-height: 1.35 !important;
}
.spmc-service-page .pillar-sublist,
.spmc-service-page .value-list,
.spmc-service-page .benefits-list,
.spmc-service-page .focus-list {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.spmc-service-page .pillar-sublist li,
.spmc-service-page .value-list li,
.spmc-service-page .benefits-list li {
position: relative !important;
width: 100% !important;
margin: 0 0 10px !important;
padding-left: 22px !important;
line-height: 1.6 !important;
overflow-wrap: anywhere !important;
}
.spmc-service-page .pillar-sublist li:last-child,
.spmc-service-page .value-list li:last-child,
.spmc-service-page .benefits-list li:last-child {
margin-bottom: 0 !important;
}
.spmc-service-page .pillar-sublist li::before,
.spmc-service-page .value-list li::before,
.spmc-service-page .benefits-list li::before {
left: 2px !important;
top: 0.1em !important;
} .spmc-service-page .container.focus-grid,
.spmc-service-page .focus-grid.container {
display: grid !important;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
gap: 60px !important;
align-items: center !important;
}
.spmc-service-page .focus-image-wrapper,
.spmc-service-page .focus-content {
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.spmc-service-page .focus-content {
padding-left: 0 !important;
padding-right: 0 !important;
}
.spmc-service-page .focus-item {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 20px 24px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: flex-start !important;
gap: 20px !important;
}
.spmc-service-page .focus-item > *,
.spmc-service-page .focus-item > div:last-child {
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
@media (max-width: 1120px) {
.spmc-service-page .pillars-grid,
.spmc-service-page .strategy-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 992px) {
.spmc-service-page .container.focus-grid,
.spmc-service-page .focus-grid.container,
.spmc-service-page .contact-main-grid {
grid-template-columns: 1fr !important;
gap: 40px !important;
}
}
@media (max-width: 860px) {
.spmc-service-page .pillars-grid,
.spmc-service-page .strategy-grid,
.spmc-service-page .fin-services-grid,
.spmc-service-page .values-grid,
.spmc-service-page .benefits-grid,
.spmc-service-page .industry-grid,
.spmc-service-page .sector-grid,
.spmc-service-page .vision-mission-grid,
.spmc-service-page .team-grid {
grid-template-columns: 1fr !important;
gap: 22px !important;
}
.spmc-service-page .pillar-card,
.spmc-service-page .strategy-card,
.spmc-service-page .fin-service-card,
.spmc-service-page .value-card,
.spmc-service-page .benefit-card,
.spmc-service-page .industry-card,
.spmc-service-page .sector-card,
.spmc-service-page .vm-card {
padding: 28px 24px !important;
}
.spmc-service-page .focus-item {
padding: 18px 20px !important;
gap: 16px !important;
}
}
@media (max-width: 620px) {
.spmc-service-page .pillars-section > .container,
.spmc-service-page .focus-section > .container,
.spmc-service-page .strategy-section > .container,
.spmc-service-page .fin-services-section > .container,
.spmc-service-page .fundraising-section > .container,
.spmc-service-page .mna-section > .container,
.spmc-service-page .process-section > .container,
.spmc-service-page .benefits-section > .container,
.spmc-service-page .industry-section > .container,
.spmc-service-page .sector-section > .container,
.spmc-service-page .team-section > .container,
.spmc-service-page .vision-mission-section > .container,
.spmc-service-page .values-section > .container,
.spmc-service-page .history-section > .container,
.spmc-service-page .contact-main-section > .container,
.spmc-service-page .section > .container.focus-grid,
.spmc-service-page .container.focus-grid,
.spmc-service-page .focus-grid.container {
width: calc(100% - 24px) !important;
max-width: calc(100vw - 24px) !important;
}
.spmc-service-page .hero-quote-box {
padding: 18px 18px !important;
}
.spmc-service-page .pillar-card,
.spmc-service-page .strategy-card,
.spmc-service-page .fin-service-card,
.spmc-service-page .value-card,
.spmc-service-page .benefit-card,
.spmc-service-page .industry-card,
.spmc-service-page .sector-card,
.spmc-service-page .vm-card {
padding: 24px 20px !important;
}
.spmc-service-page .focus-item {
padding: 16px 18px !important;
gap: 14px !important;
}
} .spmc-tax-service-page .tax-consult-hero,
.spmc-tax-service-page .tax-risk-hero,
.spmc-tax-service-page .tax-rescue-hero,
.spmc-tax-service-page .tax-staffing-hero {
position: relative;
padding: 160px 0 100px;
background: var(--bg-dark);
border-bottom: 1px solid var(--border-light);
overflow-x: clip;
}
.spmc-tax-service-page .tax-consult-hero .hero-grid,
.spmc-tax-service-page .tax-risk-hero .hero-grid,
.spmc-tax-service-page .tax-rescue-hero .hero-grid,
.spmc-tax-service-page .tax-staffing-hero .hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
gap: 60px;
align-items: center;
}
.spmc-tax-service-page .hero-content {
max-width: 700px;
}
.spmc-tax-service-page .tax-consult-hero h1,
.spmc-tax-service-page .tax-risk-hero h1,
.spmc-tax-service-page .tax-rescue-hero h1,
.spmc-tax-service-page .tax-staffing-hero h1 {
font-size: clamp(2.2rem, 4vw, 3.4rem);
margin-bottom: 20px;
font-family: var(--font-heading);
}
.spmc-tax-service-page .hero-subtitle {
font-size: 1.02rem;
line-height: 1.7;
color: var(--text-muted);
}
.spmc-tax-service-page .hero-image-frame {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
background: var(--bg-slate);
border: 1px solid var(--border-light);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.spmc-tax-service-page .hero-image-frame img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
filter: grayscale(0.2) contrast(1.1);
}
.spmc-tax-service-page .image-mask {
position: absolute;
inset: 0;
background: linear-gradient(30deg, var(--bg-dark) 5%, transparent 60%);
pointer-events: none;
}
.spmc-tax-service-page .tax-staffing-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.spmc-tax-service-page .pricing-section > .container {
width: min(100% - 48px, var(--container-width)) !important;
max-width: var(--container-width) !important;
margin-inline: auto !important;
}
.spmc-tax-service-page .pricing-table-wrapper {
width: 100%;
max-width: 100%;
margin-top: 40px;
overflow-x: auto;
border: 1px solid var(--border-light);
background: var(--bg-slate);
}
.spmc-tax-service-page .tax-pricing-table th,
.spmc-tax-service-page .tax-pricing-table td {
vertical-align: top;
}
.spmc-tax-service-page .brand-signature em {
display: block;
margin-top: 8px;
color: var(--text-muted);
font-size: 0.92rem;
line-height: 1.6;
font-family: var(--font-primary);
font-style: italic;
letter-spacing: 0;
text-transform: none;
}
@media (max-width: 992px) {
.spmc-tax-service-page .tax-consult-hero .hero-grid,
.spmc-tax-service-page .tax-risk-hero .hero-grid,
.spmc-tax-service-page .tax-rescue-hero .hero-grid,
.spmc-tax-service-page .tax-staffing-hero .hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.spmc-tax-service-page .hero-image-frame {
aspect-ratio: 16 / 9;
}
}
@media (max-width: 860px) {
.spmc-tax-service-page .tax-staffing-grid {
grid-template-columns: 1fr !important;
}
} .spmc-service-page .pricing-section > .container,
.spmc-service-page .table-section > .container,
.spmc-service-page .comparison-section > .container {
width: min(100% - 48px, var(--container-width)) !important;
max-width: var(--container-width) !important;
margin-inline: auto !important;
padding-inline: 0 !important;
box-sizing: border-box !important;
}
.spmc-service-page .pricing-table-wrapper,
.spmc-service-page .table-wrapper,
.spmc-service-page .comparison-table-wrapper {
width: 100% !important;
max-width: 100% !important;
margin: 40px auto 0 !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
background: linear-gradient(180deg, rgba(12, 15, 22, 0.98), rgba(8, 10, 15, 0.98)) !important;
border: 1px solid rgba(197, 168, 128, 0.22) !important;
border-radius: 24px !important;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28) !important;
box-sizing: border-box !important;
}
.spmc-service-page .pricing-table,
.spmc-service-page table.pricing-table,
.spmc-service-page .service-table,
.spmc-service-page table.service-table {
width: 100% !important;
min-width: 760px !important;
margin: 0 !important;
border-collapse: separate !important;
border-spacing: 0 !important;
table-layout: fixed !important;
background: transparent !important;
color: var(--text-light) !important;
}
.spmc-service-page .pricing-table th,
.spmc-service-page .pricing-table td,
.spmc-service-page .service-table th,
.spmc-service-page .service-table td {
padding: 22px 24px !important;
vertical-align: top !important;
text-align: left !important;
border: 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
line-height: 1.65 !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
box-sizing: border-box !important;
}
.spmc-service-page .pricing-table th:last-child,
.spmc-service-page .pricing-table td:last-child,
.spmc-service-page .service-table th:last-child,
.spmc-service-page .service-table td:last-child {
border-right: 0 !important;
}
.spmc-service-page .pricing-table thead th,
.spmc-service-page .service-table thead th {
position: relative !important;
font-family: var(--font-primary) !important;
font-size: 0.78rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--gold-light) !important;
background: rgba(197, 168, 128, 0.09) !important;
}
.spmc-service-page .pricing-table tbody tr:last-child td,
.spmc-service-page .service-table tbody tr:last-child td {
border-bottom: 0 !important;
}
.spmc-service-page .pricing-table tbody tr,
.spmc-service-page .service-table tbody tr {
background: rgba(255, 255, 255, 0.015) !important;
}
.spmc-service-page .pricing-table tbody tr:nth-child(even),
.spmc-service-page .service-table tbody tr:nth-child(even) {
background: rgba(255, 255, 255, 0.03) !important;
}
.spmc-service-page .pricing-table tbody tr:hover td,
.spmc-service-page .service-table tbody tr:hover td {
background: rgba(197, 168, 128, 0.045) !important;
}
.spmc-service-page .pricing-table td strong,
.spmc-service-page .service-table td strong {
display: inline-block !important;
color: var(--text-white) !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
.spmc-service-page .pricing-table td:first-child strong,
.spmc-service-page .service-table td:first-child strong {
color: var(--gold-light) !important;
}
.spmc-service-page .pricing-table ul,
.spmc-service-page .service-table ul {
margin: 0 !important;
padding-left: 18px !important;
}
.spmc-service-page .pricing-table li,
.spmc-service-page .service-table li {
margin-bottom: 8px !important;
color: var(--text-muted) !important;
}
.spmc-service-page .pricing-table li:last-child,
.spmc-service-page .service-table li:last-child {
margin-bottom: 0 !important;
}
@media (max-width: 860px) {
.spmc-service-page .pricing-section > .container,
.spmc-service-page .table-section > .container,
.spmc-service-page .comparison-section > .container {
width: calc(100% - 28px) !important;
max-width: calc(100vw - 28px) !important;
}
.spmc-service-page .pricing-table-wrapper,
.spmc-service-page .table-wrapper,
.spmc-service-page .comparison-table-wrapper {
border-radius: 20px !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.spmc-service-page .pricing-table,
.spmc-service-page table.pricing-table,
.spmc-service-page .service-table,
.spmc-service-page table.service-table {
min-width: 0 !important;
width: 100% !important;
display: block !important;
}
.spmc-service-page .pricing-table thead,
.spmc-service-page .service-table thead {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.spmc-service-page .pricing-table tbody,
.spmc-service-page .pricing-table tr,
.spmc-service-page .pricing-table td,
.spmc-service-page .service-table tbody,
.spmc-service-page .service-table tr,
.spmc-service-page .service-table td {
display: block !important;
width: 100% !important;
}
.spmc-service-page .pricing-table tbody,
.spmc-service-page .service-table tbody {
display: grid !important;
gap: 18px !important;
}
.spmc-service-page .pricing-table tr,
.spmc-service-page .service-table tr {
background: linear-gradient(180deg, rgba(12, 15, 22, 0.98), rgba(8, 10, 15, 0.98)) !important;
border: 1px solid rgba(197, 168, 128, 0.20) !important;
border-radius: 20px !important;
overflow: hidden !important;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.26) !important;
}
.spmc-service-page .pricing-table td,
.spmc-service-page .service-table td {
position: relative !important;
display: grid !important;
grid-template-columns: minmax(110px, 36%) minmax(0, 1fr) !important;
gap: 16px !important;
padding: 16px 18px !important;
border-right: 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.spmc-service-page .pricing-table td::before,
.spmc-service-page .service-table td::before {
content: attr(data-label) !important;
color: var(--gold-primary) !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
line-height: 1.45 !important;
text-transform: uppercase !important;
}
.spmc-service-page .pricing-table td > *,
.spmc-service-page .service-table td > * {
min-width: 0 !important;
}
}
@media (max-width: 520px) {
.spmc-service-page .pricing-table td,
.spmc-service-page .service-table td {
grid-template-columns: 1fr !important;
gap: 8px !important;
padding: 16px !important;
}
} .spmc-service-page .focus-grid,
.spmc-service-page .container.focus-grid,
body.spmc-service-canvas .spmc-service-page .container.focus-grid {
align-items: center !important;
}
.spmc-service-page .focus-image-wrapper {
position: relative !important;
display: grid !important;
place-items: center !important;
align-self: center !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
padding: clamp(10px, 1.4vw, 16px) !important;
box-sizing: border-box !important;
overflow: visible !important;
isolation: isolate !important;
}
.spmc-service-page .focus-image-wrapper::before {
inset: calc(clamp(8px, 1.1vw, 14px) * -1) !important;
transform: none !important;
z-index: -1 !important;
box-sizing: border-box !important;
}
.spmc-service-page .focus-image-wrapper img {
position: relative !important;
z-index: 1 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 auto !important;
aspect-ratio: 4 / 3 !important;
object-fit: cover !important;
object-position: center center !important;
box-sizing: border-box !important;
}
.spmc-service-page .hero-media-wrapper {
display: flex !important;
justify-content: center !important;
align-items: center !important;
min-width: 0 !important;
}
.spmc-service-page .hero-image-frame {
display: grid !important;
place-items: center !important;
align-self: center !important;
width: 100% !important;
max-width: min(480px, 100%) !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.spmc-service-page .hero-image-frame img {
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 auto !important;
object-fit: cover !important;
object-position: center center !important;
}
.spmc-service-page .focus-content,
.spmc-service-page .focus-list,
.spmc-service-page .focus-item {
min-width: 0 !important;
box-sizing: border-box !important;
}
@media (max-width: 980px) {
.spmc-service-page .focus-grid,
.spmc-service-page .container.focus-grid,
body.spmc-service-canvas .spmc-service-page .container.focus-grid {
grid-template-columns: 1fr !important;
gap: 38px !important;
}
.spmc-service-page .focus-image-wrapper {
width: min(100%, 720px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (max-width: 620px) {
.spmc-service-page .focus-image-wrapper {
padding: 10px !important;
}
.spmc-service-page .focus-image-wrapper::before {
inset: -8px !important;
}
} :root {
--bg-dark: #141923;
--bg-slate: #202838;
--gold-primary: #dcc18f;
--gold-dark: #b99058;
--gold-light: #f4ddba;
--text-white: #fffaf1;
--text-light: #f3eee5;
--text-muted: #cfc6b9;
--border-light: rgba(220, 193, 143, 0.20);
--border-strong: rgba(220, 193, 143, 0.36);
}
html,
body,
#page,
.site,
.site-content,
body.spmc-dark-canvas,
body.spmc-service-canvas,
body.spmc-dark-canvas #page,
body.spmc-service-canvas #page,
body.spmc-dark-canvas .site,
body.spmc-service-canvas .site {
background-color: var(--bg-dark) !important;
}
body {
color: var(--text-light);
background-image:
radial-gradient(circle at 12% 8%, rgba(220, 193, 143, 0.10), transparent 30%),
radial-gradient(circle at 88% 0%, rgba(255, 255, 255, 0.055), transparent 28%),
linear-gradient(180deg, #18202c 0%, var(--bg-dark) 46%, #171b24 100%) !important;
background-attachment: fixed;
}
.bg-grid-overlay {
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);
opacity: 0.72;
}
.site-header.editorial-header {
background: rgba(24, 31, 43, 0.90) !important;
border-bottom-color: rgba(220, 193, 143, 0.24) !important;
box-shadow: 0 20px 70px rgba(3, 6, 12, 0.26) !important;
}
.site-header.editorial-header.scrolled {
background: rgba(22, 28, 39, 0.96) !important;
}
.service-card,
.value-card,
.news-card,
.method-card,
.process-card,
.form-card,
.spotlight-card,
.stat-card,
.feature-card,
.archive-card,
.sidebar-card,
.article-card,
.service-box,
.tax-card,
.pillar-card,
.phase-card,
.benefit-card,
.focus-item,
.team-card,
.value-row,
.spmc-service-page .phase-card,
.spmc-service-page .pillar-card,
.spmc-service-page .benefit-card,
.spmc-service-page .focus-item,
.spmc-service-page .value-card,
.spmc-service-page .service-card,
.spmc-service-page .tax-card,
.spmc-contact-page .contact-form-col,
.spmc-contact-page .contact-info-col {
background: linear-gradient(180deg, rgba(38, 48, 66, 0.92), rgba(27, 34, 48, 0.96)) !important;
border-color: rgba(220, 193, 143, 0.22) !important;
box-shadow: 0 18px 55px rgba(4, 8, 14, 0.22) !important;
}
.service-card:hover,
.value-card:hover,
.news-card:hover,
.method-card:hover,
.process-card:hover,
.feature-card:hover,
.archive-card:hover,
.spmc-service-page .phase-card:hover,
.spmc-service-page .pillar-card:hover,
.spmc-service-page .benefit-card:hover,
.spmc-service-page .focus-item:hover {
background: linear-gradient(180deg, rgba(48, 59, 78, 0.96), rgba(33, 41, 56, 0.98)) !important;
border-color: rgba(220, 193, 143, 0.38) !important;
}
.hero::before,
.spmc-service-page .service-hero::before,
.spmc-service-page .hero-section::before,
.spmc-service-page .page-hero::before {
opacity: 0.72 !important;
}
.section-heading p,
.eyebrow,
.breadcrumb,
.breadcrumb a,
.article-meta,
.post-meta,
p,
li,
.spmc-service-page p,
.spmc-service-page li,
.spmc-service-page .section-desc,
.spmc-service-page .hero-subtitle,
.spmc-service-page .card-desc {
color: var(--text-muted) !important;
}
h1, h2, h3, h4, h5, h6,
.spmc-service-page h1,
.spmc-service-page h2,
.spmc-service-page h3,
.spmc-service-page h4 {
color: var(--text-white) !important;
}
.btn-primary,
.consultation-form .submit-btn,
.search-submit,
.ff-btn-submit,
.spmc-contact-page .ff-btn-submit {
color: #141923 !important;
background: linear-gradient(135deg, var(--gold-light), var(--gold-primary)) !important;
box-shadow: 0 14px 34px rgba(220, 193, 143, 0.22) !important;
}
.btn-primary:hover,
.consultation-form .submit-btn:hover,
.search-submit:hover,
.ff-btn-submit:hover,
.spmc-contact-page .ff-btn-submit:hover {
background: linear-gradient(135deg, #fff0d5, var(--gold-light)) !important;
box-shadow: 0 18px 44px rgba(220, 193, 143, 0.30) !important;
} .logo-carousel {
border-block-color: rgba(220, 193, 143, 0.24) !important;
background: rgba(255, 250, 241, 0.035) !important;
}
.logo-track span {
color: var(--gold-primary) !important;
opacity: 0.95 !important;
}
.logo-track span:hover,
.logo-track span:focus-visible {
color: var(--text-muted) !important;
opacity: 0.42 !important;
transform: scale(1.03);
} .mega-menu,
.spmc-mega-menu,
.primary-menu .sub-menu,
.site-header .mega-panel {
background: linear-gradient(180deg, rgba(35, 44, 61, 0.98), rgba(24, 31, 43, 0.98)) !important;
border-color: rgba(220, 193, 143, 0.26) !important;
box-shadow: 0 26px 80px rgba(3, 6, 12, 0.34) !important;
}
.primary-menu a,
.main-navigation a,
.site-header .nav-link {
color: var(--text-light) !important;
}
.primary-menu a:hover,
.primary-menu a:focus-visible,
.main-navigation a:hover,
.main-navigation a:focus-visible,
.site-header .nav-link:hover,
.site-header .nav-link:focus-visible {
color: var(--gold-light) !important;
}
input,
textarea,
select,
.search-field,
.consultation-form input,
.consultation-form textarea,
.spmc-contact-page input,
.spmc-contact-page textarea,
.spmc-contact-page select {
background-color: rgba(255, 250, 241, 0.065) !important;
border-color: rgba(220, 193, 143, 0.24) !important;
color: var(--text-light) !important;
}
input:focus,
textarea:focus,
select:focus,
.search-field:focus,
.consultation-form input:focus,
.consultation-form textarea:focus,
.spmc-contact-page input:focus,
.spmc-contact-page textarea:focus,
.spmc-contact-page select:focus {
border-color: rgba(220, 193, 143, 0.58) !important;
box-shadow: 0 0 0 3px rgba(220, 193, 143, 0.12) !important;
}
.footer,
.site-footer {
background: linear-gradient(180deg, rgba(22, 28, 39, 0.96), rgba(18, 22, 31, 1)) !important;
border-top-color: rgba(220, 193, 143, 0.22) !important;
}  .spmc-service-page .pricing-table-wrapper,
.spmc-service-page .table-wrapper,
.spmc-service-page .comparison-table-wrapper {
border-color: rgba(220, 193, 143, 0.28) !important;
outline: 0 !important;
}
.spmc-service-page table,
.spmc-service-page table.pricing-table,
.spmc-service-page table.service-table,
.spmc-service-page .pricing-table,
.spmc-service-page .service-table {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
border-collapse: separate !important;
border-spacing: 0 !important;
}
.spmc-service-page .pricing-table th,
.spmc-service-page .pricing-table td,
.spmc-service-page .service-table th,
.spmc-service-page .service-table td,
.spmc-service-page table th,
.spmc-service-page table td {
border-top: 0 !important;
border-left: 0 !important;
border-bottom: 1px solid rgba(220, 193, 143, 0.22) !important;
border-right: 1px solid rgba(220, 193, 143, 0.18) !important;
box-shadow: none !important;
}
.spmc-service-page .pricing-table th:last-child,
.spmc-service-page .pricing-table td:last-child,
.spmc-service-page .service-table th:last-child,
.spmc-service-page .service-table td:last-child,
.spmc-service-page table th:last-child,
.spmc-service-page table td:last-child {
border-right: 0 !important;
}
.spmc-service-page .pricing-table tbody tr:last-child td,
.spmc-service-page .service-table tbody tr:last-child td,
.spmc-service-page table tbody tr:last-child td {
border-bottom: 0 !important;
}
.spmc-service-page .pricing-table thead th,
.spmc-service-page .service-table thead th,
.spmc-service-page table thead th {
border-bottom-color: rgba(220, 193, 143, 0.30) !important;
background: rgba(220, 193, 143, 0.105) !important;
} .section.values .values-list-wrapper {
width: min(100%, 980px) !important;
margin-inline: auto !important;
gap: 14px !important;
}
.section.values .value-row {
display: grid !important;
grid-template-columns: 72px minmax(0, 1fr) !important;
align-items: stretch !important;
gap: 28px !important;
width: 100% !important;
padding: 26px 30px !important;
border: 1px solid rgba(220, 193, 143, 0.18) !important;
border-radius: 20px !important;
box-sizing: border-box !important;
transform: none !important;
}
.section.values .value-row:first-child {
border-top: 1px solid rgba(220, 193, 143, 0.18) !important;
}
.section.values .value-row:hover {
padding-left: 30px !important;
background: linear-gradient(180deg, rgba(48, 59, 78, 0.96), rgba(33, 41, 56, 0.98)) !important;
border-color: rgba(220, 193, 143, 0.34) !important;
}
.section.values .value-number {
width: 72px !important;
min-width: 72px !important;
display: flex !important;
align-items: flex-start !important;
justify-content: flex-start !important;
padding-top: 2px !important;
line-height: 1 !important;
}
.section.values .value-content {
display: grid !important;
grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr) !important;
align-items: start !important;
gap: 28px !important;
width: 100% !important;
min-width: 0 !important;
}
.section.values .value-content h3,
.section.values .value-content p {
margin: 0 !important;
min-width: 0 !important;
}
.section.values .value-content h3 {
line-height: 1.28 !important;
}
.section.values .value-content p {
max-width: 620px !important;
line-height: 1.65 !important;
}
@media (max-width: 820px) {
.section.values .value-row {
grid-template-columns: 56px minmax(0, 1fr) !important;
gap: 18px !important;
padding: 22px !important;
}
.section.values .value-row:hover {
padding-left: 22px !important;
}
.section.values .value-number {
width: 56px !important;
min-width: 56px !important;
font-size: 1.75rem !important;
}
.section.values .value-content {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
}
@media (max-width: 520px) {
.section.values .values-list-wrapper {
gap: 12px !important;
}
.section.values .value-row {
grid-template-columns: 1fr !important;
gap: 12px !important;
padding: 20px !important;
}
.section.values .value-row:hover {
padding-left: 20px !important;
}
.section.values .value-number {
width: auto !important;
min-width: 0 !important;
}
}  .home #about .about-media-wrapper,
.front-page #about .about-media-wrapper,
#about.about .about-media-wrapper {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 0 !important;
}
.home #about .about-image-frame,
.front-page #about .about-image-frame,
#about.about .about-image-frame {
display: grid !important;
place-items: center !important;
width: 100% !important;
max-width: 560px !important;
aspect-ratio: 4 / 3 !important;
min-height: 0 !important;
padding: 0 !important;
overflow: visible !important;
isolation: isolate !important;
}
.home #about .about-image-frame > img,
.front-page #about .about-image-frame > img,
#about.about .about-image-frame > img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
aspect-ratio: auto !important;
object-fit: cover !important;
object-position: center center !important;
transform: none !important;
position: relative !important;
z-index: 1 !important;
}
.home #about .about-image-frame::before,
.front-page #about .about-image-frame::before,
#about.about .about-image-frame::before {
inset: -12px !important;
transform: none !important;
border-color: var(--border-strong) !important;
z-index: -1 !important;
}
.home #about .about-image-frame .floating-badge,
.front-page #about .about-image-frame .floating-badge,
#about.about .about-image-frame .floating-badge {
z-index: 2 !important;
}
@media (max-width: 920px) {
.home #about .about-image-frame,
.front-page #about .about-image-frame,
#about.about .about-image-frame {
max-width: 620px !important;
width: min(100%, 620px) !important;
}
}
@media (max-width: 620px) {
.home #about .about-image-frame,
.front-page #about .about-image-frame,
#about.about .about-image-frame {
aspect-ratio: 4 / 3 !important;
max-width: calc(100vw - 48px) !important;
}
.home #about .about-image-frame::before,
.front-page #about .about-image-frame::before,
#about.about .about-image-frame::before {
inset: -8px !important;
}
.home #about .about-image-frame .floating-badge,
.front-page #about .about-image-frame .floating-badge,
#about.about .about-image-frame .floating-badge {
left: 14px !important;
right: 14px !important;
bottom: 14px !important;
max-width: calc(100% - 28px) !important;
}
} @media (max-width: 860px) {
body.spmc-mobile-nav-open {
overflow: hidden !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav.is-open {
transform: translateX(0) !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
.spmc-demo-main-nav.is-open > .nav-item.has-mega {
display: block !important;
width: 100% !important;
min-width: 0 !important;
opacity: 1 !important;
visibility: visible !important;
}
.spmc-demo-main-nav.is-open .mega-trigger {
display: flex !important;
width: 100% !important;
min-height: 54px !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
padding: 16px 0 !important;
border: 0 !important;
border-bottom: 1px solid rgba(220, 193, 143, 0.20) !important;
background: transparent !important;
color: var(--text-light) !important;
text-align: left !important;
cursor: pointer !important;
}
.spmc-demo-main-nav.is-open .nav-item.has-mega.is-open > .mega-trigger {
color: var(--gold-light) !important;
border-bottom-color: rgba(220, 193, 143, 0.38) !important;
}
.spmc-demo-main-nav.is-open .nav-item.has-mega.is-open > .mega-trigger span {
transform: rotate(180deg) !important;
}
.spmc-demo-main-nav.is-open .nav-item.has-mega > .mega-menu {
position: static !important;
inset: auto !important;
left: auto !important;
top: auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
display: none !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
transition: none !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.spmc-demo-main-nav.is-open .nav-item.has-mega.is-open > .mega-menu {
display: grid !important;
padding: 10px 0 18px !important;
}
.spmc-demo-main-nav.is-open .nav-item.has-mega > .mega-menu .mega-col,
.spmc-demo-main-nav.is-open .nav-item.has-mega > .mega-menu .mega-col:first-child {
display: block !important;
width: 100% !important;
min-width: 0 !important;
padding: 14px 0 14px 14px !important;
margin: 0 !important;
border-left: 0 !important;
border-bottom: 1px solid rgba(220, 193, 143, 0.16) !important;
background: transparent !important;
}
.spmc-demo-main-nav.is-open .nav-item.has-mega > .mega-menu .mega-col:last-child {
border-bottom: 0 !important;
}
.spmc-demo-main-nav.is-open .mega-header {
display: grid !important;
grid-template-columns: 22px minmax(0, 1fr) !important;
align-items: center !important;
gap: 10px !important;
min-height: 30px !important;
margin: 0 0 8px !important;
padding: 0 !important;
border: 0 !important;
}
.spmc-demo-main-nav.is-open .mega-header h4 {
margin: 0 !important;
color: var(--text-white) !important;
font-size: 0.98rem !important;
line-height: 1.25 !important;
white-space: normal !important;
}
.spmc-demo-main-nav.is-open .mega-col a {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
width: 100% !important;
min-width: 0 !important;
min-height: 42px !important;
margin: 0 0 6px !important;
padding: 10px 12px !important;
border: 1px solid transparent !important;
border-radius: 12px !important;
background: rgba(255, 250, 241, 0.025) !important;
color: var(--text-muted) !important;
line-height: 1.35 !important;
text-align: left !important;
white-space: normal !important;
overflow: visible !important;
transform: none !important;
}
.spmc-demo-main-nav.is-open .mega-col a .mega-link-text,
.spmc-demo-main-nav.is-open .mega-col a {
overflow-wrap: anywhere !important;
word-break: normal !important;
}
.spmc-demo-main-nav.is-open .mega-col a::after {
display: none !important;
}
.spmc-demo-main-nav.is-open .mega-col a:hover,
.spmc-demo-main-nav.is-open .mega-col a:focus-visible,
.spmc-demo-main-nav.is-open .mega-col a.active,
.spmc-demo-main-nav.is-open .mega-col a[aria-current="page"] {
color: var(--gold-light) !important;
background: rgba(220, 193, 143, 0.08) !important;
border-color: rgba(220, 193, 143, 0.24) !important;
outline: none !important;
box-shadow: inset 2px 0 0 var(--gold-primary) !important;
}
} @media (max-width: 768px) {
.spmc-service-page .hero-media-wrapper {
width: 100% !important;
justify-content: center !important;
align-items: center !important;
padding-inline: 0 !important;
}
.spmc-service-page .hero-image-frame,
.spmc-tax-service-page .hero-image-frame,
.spmc-about-page .about-hero .hero-image-frame {
width: 100% !important;
max-width: min(100%, 560px) !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: auto !important;
padding: clamp(8px, 2.6vw, 12px) !important;
display: block !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.spmc-service-page .hero-image-frame img,
.spmc-tax-service-page .hero-image-frame img,
.spmc-about-page .about-hero .hero-image-frame img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
aspect-ratio: auto !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 auto !important;
}
.spmc-service-page .hero-image-frame .image-mask,
.spmc-tax-service-page .hero-image-frame .image-mask,
.spmc-about-page .about-hero .hero-image-frame .image-mask {
inset: clamp(8px, 2.6vw, 12px) !important;
border-radius: inherit !important;
}
}
@media (max-width: 520px) {
.spmc-service-page section[class*="-hero"] .hero-grid,
.spmc-service-page .section[class*="-hero"] .hero-grid {
gap: 28px !important;
}
.spmc-service-page .hero-image-frame,
.spmc-tax-service-page .hero-image-frame,
.spmc-about-page .about-hero .hero-image-frame {
max-width: 100% !important;
padding: 8px !important;
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34) !important;
}
.spmc-service-page .hero-image-frame .image-mask,
.spmc-tax-service-page .hero-image-frame .image-mask,
.spmc-about-page .about-hero .hero-image-frame .image-mask {
inset: 8px !important;
}
} .home .process .process-preview-panel,
.front-page .process .process-preview-panel,
body .process .process-preview-panel.glass-panel,
body .process-preview-panel#processPreview {
background-color: var(--bg-slate) !important;
border-color: rgba(220, 193, 143, 0.30) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 70px rgba(4, 8, 14, 0.28) !important;
}
.process .process-preview-panel::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 50% 18%, rgba(220, 193, 143, 0.16), transparent 36%),
linear-gradient(180deg, transparent 0%, rgba(10, 14, 22, 0.25) 100%);
z-index: 0;
}
.process .process-preview-panel .preview-item {
position: relative;
z-index: 1;
}
.process .process-preview-panel .preview-icon-wrapper {
background: rgba(20, 25, 35, 0.58);
backdrop-filter: blur(8px);
} @media (max-width: 860px) {
body.spmc-mobile-nav-open .spmc-demo-main-nav {
overflow-y: auto !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav > .nav-item.has-mega {
position: relative !important;
display: block !important;
width: 100% !important;
min-height: 0 !important;
border-bottom: 1px solid rgba(220, 193, 143, 0.18) !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav > .nav-item.has-mega::after {
display: none !important;
content: none !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-trigger {
position: relative !important;
z-index: 2 !important;
display: flex !important;
width: 100% !important;
min-height: 56px !important;
align-items: center !important;
justify-content: space-between !important;
padding: 16px 0 !important;
border: 0 !important;
background: transparent !important;
color: var(--text-light) !important;
box-shadow: none !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-trigger span {
flex: 0 0 auto !important;
transition: transform 0.22s ease !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .nav-item.has-mega.is-open > .mega-trigger {
color: var(--gold-light) !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .nav-item.has-mega.is-open > .mega-trigger span {
transform: rotate(180deg) !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .nav-item.has-mega > .mega-menu,
body.spmc-mobile-nav-open .spmc-demo-main-nav .nav-item.has-mega:hover > .mega-menu,
body.spmc-mobile-nav-open .spmc-demo-main-nav .nav-item.has-mega:focus-within > .mega-menu {
position: static !important;
inset: auto !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
overflow: hidden !important;
transform: none !important;
transition: max-height 0.28s ease, opacity 0.2s ease, padding 0.2s ease !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .nav-item.has-mega.is-open > .mega-menu,
body.spmc-mobile-nav-open .spmc-demo-main-nav .nav-item.has-mega.is-open:hover > .mega-menu,
body.spmc-mobile-nav-open .spmc-demo-main-nav .nav-item.has-mega.is-open:focus-within > .mega-menu {
max-height: 72vh !important;
padding: 8px 0 18px !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .nav-item.has-mega > .mega-menu .mega-col,
body.spmc-mobile-nav-open .spmc-demo-main-nav .nav-item.has-mega > .mega-menu .mega-col:first-child {
display: block !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 12px 0 12px 14px !important;
border-left: 0 !important;
border-bottom: 1px solid rgba(220, 193, 143, 0.14) !important;
background: transparent !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .nav-item.has-mega > .mega-menu .mega-col:last-child {
border-bottom: 0 !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header {
display: grid !important;
grid-template-columns: 22px minmax(0, 1fr) !important;
align-items: center !important;
gap: 10px !important;
min-height: 30px !important;
margin: 0 0 8px !important;
padding: 0 !important;
border: 0 !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col a {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
width: 100% !important;
min-height: 42px !important;
margin: 0 0 6px !important;
padding: 10px 12px !important;
border-radius: 12px !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
transform: none !important;
}
} .spmc-demo-main-nav .mega-header.mega-col-toggle {
appearance: none;
border: 0;
background: transparent;
font: inherit;
cursor: default;
color: inherit;
text-align: left;
width: 100%;
}
.spmc-demo-main-nav .mega-col-caret {
display: none;
}
.spmc-demo-main-nav .mega-submenu-panel {
display: contents;
}
@media (min-width: 861px) {
.spmc-demo-main-nav .mega-header.mega-col-toggle {
pointer-events: none;
}
}
@media (max-width: 860px) {
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-menu {
display: block !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu:first-child,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu:last-child {
padding: 0 !important;
margin: 8px 0 !important;
border: 1px solid rgba(220, 193, 143, 0.16) !important;
border-radius: 16px !important;
background: rgba(255, 255, 255, 0.035) !important;
overflow: hidden !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header.mega-col-toggle {
display: grid !important;
grid-template-columns: 24px minmax(0, 1fr) 22px !important;
align-items: center !important;
gap: 10px !important;
min-height: 52px !important;
margin: 0 !important;
padding: 14px 14px !important;
border: 0 !important;
border-bottom: 1px solid transparent !important;
color: var(--text-light) !important;
cursor: pointer !important;
background: transparent !important;
border-radius: 0 !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header.mega-col-toggle h4 {
min-width: 0 !important;
margin: 0 !important;
color: inherit !important;
font-size: 0.98rem !important;
line-height: 1.25 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header.mega-col-toggle .mega-svg {
width: 20px !important;
height: 20px !important;
justify-self: center !important;
color: var(--gold-primary) !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col-caret {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 22px !important;
height: 22px !important;
color: var(--gold-primary) !important;
font-size: 0.78rem !important;
line-height: 1 !important;
transition: transform 0.22s ease !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-header.mega-col-toggle {
color: var(--gold-light) !important;
border-bottom-color: rgba(220, 193, 143, 0.16) !important;
background: rgba(220, 193, 143, 0.055) !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-header.mega-col-toggle .mega-col-caret {
transform: rotate(180deg) !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-submenu-panel {
display: block !important;
max-height: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
overflow: hidden !important;
padding: 0 10px !important;
pointer-events: none !important;
transition: max-height 0.28s ease, opacity 0.2s ease, padding 0.2s ease, visibility 0s linear 0.22s !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-submenu-panel {
max-height: 520px !important;
opacity: 1 !important;
visibility: visible !important;
padding: 10px 10px 12px !important;
pointer-events: auto !important;
transition-delay: 0s !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu:not(.is-sub-open) > .mega-submenu-panel a {
display: none !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-submenu-panel a {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
width: 100% !important;
min-height: 42px !important;
margin: 0 0 6px !important;
padding: 10px 12px !important;
border: 1px solid rgba(220, 193, 143, 0.12) !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, 0.035) !important;
color: var(--text-muted) !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
transform: none !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-submenu-panel a:hover,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-submenu-panel a:focus-visible,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-submenu-panel a.active,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-submenu-panel a[aria-current="page"] {
color: var(--gold-light) !important;
border-color: rgba(220, 193, 143, 0.28) !important;
background: rgba(220, 193, 143, 0.08) !important;
box-shadow: inset 2px 0 0 var(--gold-primary) !important;
outline: none !important;
}
} .spmc-demo-main-nav .mega-heading-text {
min-width: 0;
margin: 0;
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 600;
line-height: 1.2;
color: var(--text-white);
}
@media (min-width: 861px) {
.spmc-demo-main-nav .mega-heading-text {
font-size: 0.98rem;
white-space: nowrap;
}
}
@media (max-width: 860px) {
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header.mega-col-toggle .mega-heading-text {
min-width: 0 !important;
color: inherit !important;
font-family: var(--font-heading) !important;
font-size: 0.98rem !important;
font-weight: 600 !important;
line-height: 1.25 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
} .spmc-demo-main-nav .mega-header,
.spmc-demo-main-nav .mega-header.mega-col-toggle {
color: var(--gold-primary) !important;
}
.spmc-demo-main-nav .mega-svg,
.spmc-demo-main-nav .mega-col-caret,
.spmc-demo-main-nav .mega-trigger span {
color: var(--gold-primary) !important;
stroke: currentColor !important;
}
.spmc-demo-main-nav .mega-header.mega-col-toggle:hover .mega-svg,
.spmc-demo-main-nav .mega-header.mega-col-toggle:focus-visible .mega-svg,
.spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-header.mega-col-toggle .mega-svg,
.spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-header.mega-col-toggle .mega-col-caret {
color: var(--gold-light) !important;
}
@media (max-width: 860px) {
body.spmc-mobile-nav-open .spmc-demo-main-nav {
padding-inline: 18px !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav > a,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-trigger {
width: 100% !important;
min-height: 52px !important;
margin: 3px 0 !important;
padding: 14px 16px !important;
border: 1px solid transparent !important;
border-radius: 15px !important;
background: transparent !important;
box-shadow: none !important;
box-sizing: border-box !important;
color: var(--text-light) !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav > a:hover,
body.spmc-mobile-nav-open .spmc-demo-main-nav > a:focus-visible,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-trigger:hover,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-trigger:focus-visible,
body.spmc-mobile-nav-open .spmc-demo-main-nav > .nav-item.has-mega.is-open > .mega-trigger {
color: var(--gold-light) !important;
background: rgba(220, 193, 143, 0.075) !important;
border-color: rgba(220, 193, 143, 0.26) !important;
box-shadow: inset 3px 0 0 var(--gold-primary) !important;
outline: none !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav > .nav-item.has-mega.is-open > .mega-trigger span {
color: var(--gold-light) !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-menu {
width: 100% !important;
max-width: 100% !important;
margin: 4px 0 8px !important;
padding: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu:first-child,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu:last-child {
width: 100% !important;
max-width: 100% !important;
margin: 8px 0 !important;
padding: 6px !important;
border: 1px solid rgba(220, 193, 143, 0.18) !important;
border-radius: 18px !important;
background: rgba(255, 255, 255, 0.035) !important;
overflow: visible !important;
box-sizing: border-box !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header.mega-col-toggle {
width: 100% !important;
max-width: 100% !important;
min-height: 54px !important;
margin: 0 !important;
padding: 14px 14px !important;
display: grid !important;
grid-template-columns: 24px minmax(0, 1fr) 24px !important;
align-items: center !important;
gap: 10px !important;
border: 1px solid transparent !important;
border-radius: 14px !important;
background: transparent !important;
box-shadow: none !important;
color: var(--text-light) !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header.mega-col-toggle:hover,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header.mega-col-toggle:focus-visible,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-header.mega-col-toggle {
color: var(--gold-light) !important;
background: rgba(220, 193, 143, 0.085) !important;
border-color: rgba(220, 193, 143, 0.26) !important;
box-shadow: inset 3px 0 0 var(--gold-primary) !important;
outline: none !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header.mega-col-toggle .mega-svg {
width: 20px !important;
height: 20px !important;
justify-self: center !important;
color: var(--gold-primary) !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header.mega-col-toggle .mega-heading-text {
display: block !important;
min-width: 0 !important;
max-width: 100% !important;
color: inherit !important;
overflow-wrap: anywhere !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col-caret {
width: 24px !important;
height: 24px !important;
justify-content: center !important;
color: var(--gold-primary) !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-submenu-panel,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-submenu-panel {
box-sizing: border-box !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-submenu-panel {
padding: 8px 0 0 !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-submenu-panel a {
width: 100% !important;
max-width: 100% !important;
min-height: 44px !important;
margin: 0 0 7px !important;
padding: 11px 14px 11px 38px !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
align-items: center !important;
border: 1px solid rgba(220, 193, 143, 0.12) !important;
border-radius: 14px !important;
background: rgba(255, 255, 255, 0.025) !important;
box-shadow: none !important;
color: var(--text-muted) !important;
box-sizing: border-box !important;
overflow: hidden !important;
transform: none !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-submenu-panel a:hover,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-submenu-panel a:focus-visible,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-submenu-panel a.active,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-submenu-panel a[aria-current="page"] {
color: var(--gold-light) !important;
background: rgba(220, 193, 143, 0.075) !important;
border-color: rgba(220, 193, 143, 0.28) !important;
box-shadow: inset 3px 0 0 var(--gold-primary) !important;
outline: none !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-submenu-panel a .mega-link-text {
display: block !important;
min-width: 0 !important;
max-width: 100% !important;
overflow-wrap: anywhere !important;
}
}
.modal-close,
.modal-close[type="button"] {
top: 16px !important;
right: 16px !important;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
padding: 0 !important;
margin: 0 !important;
display: inline-grid !important;
place-items: center !important;
border-radius: 999px !important;
border: 1px solid rgba(220, 193, 143, 0.22) !important;
background: rgba(255, 255, 255, 0.045) !important;
color: var(--text-light) !important;
line-height: 1 !important;
font-size: 0 !important;
font-family: var(--font-primary) !important;
box-sizing: border-box !important;
transform: none !important;
overflow: hidden !important;
}
.modal-close::before,
.modal-close[type="button"]::before {
content: "×";
display: block;
width: 1em;
height: 1em;
font-size: 25px;
font-weight: 300;
line-height: 0.92;
text-align: center;
color: currentColor;
transform: translateY(-1px);
}
.modal-close:hover,
.modal-close:focus-visible,
.modal-close[type="button"]:hover,
.modal-close[type="button"]:focus-visible {
background: rgba(220, 193, 143, 0.11) !important;
border-color: rgba(220, 193, 143, 0.42) !important;
color: var(--gold-light) !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
outline: none !important;
transform: none !important;
} .search-overlay-panel {
padding: 56px 42px 44px !important;
}
.search-overlay-panel .eyebrow {
margin: 0 48px 10px 0 !important;
}
.search-overlay-panel #searchOverlayTitle,
.search-overlay-panel h2 {
margin: 0 48px 0 0 !important;
line-height: 1.18 !important;
}
.search-overlay-panel .search-form,
.search-overlay-panel .wp-block-search,
.search-overlay-panel .spmc-search-form {
margin-top: 30px !important;
}
.modal-close,
.modal-close[type="button"],
.search-overlay-close,
.search-overlay-close[type="button"] {
position: absolute !important;
top: 16px !important;
right: 16px !important;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
padding: 0 !important;
margin: 0 !important;
display: grid !important;
place-items: center !important;
border-radius: 999px !important;
border: 1px solid rgba(220, 193, 143, 0.24) !important;
background: rgba(255, 255, 255, 0.045) !important;
color: var(--text-light) !important;
font-size: 0 !important;
line-height: 1 !important;
box-sizing: border-box !important;
cursor: pointer !important;
transform: none !important;
overflow: hidden !important;
appearance: none !important;
-webkit-appearance: none !important;
}
.modal-close::before,
.modal-close[type="button"]::before,
.search-overlay-close::before,
.search-overlay-close[type="button"]::before,
.modal-close::after,
.modal-close[type="button"]::after,
.search-overlay-close::after,
.search-overlay-close[type="button"]::after {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 15px !important;
height: 1.6px !important;
border-radius: 999px !important;
background: currentColor !important;
transform-origin: 50% 50% !important;
pointer-events: none !important;
transition: background-color .18s ease, transform .18s ease !important;
}
.modal-close::before,
.modal-close[type="button"]::before,
.search-overlay-close::before,
.search-overlay-close[type="button"]::before {
transform: translate(-50%, -50%) rotate(45deg) !important;
}
.modal-close::after,
.modal-close[type="button"]::after,
.search-overlay-close::after,
.search-overlay-close[type="button"]::after {
transform: translate(-50%, -50%) rotate(-45deg) !important;
}
.modal-close:hover,
.modal-close:focus-visible,
.modal-close[type="button"]:hover,
.modal-close[type="button"]:focus-visible,
.search-overlay-close:hover,
.search-overlay-close:focus-visible,
.search-overlay-close[type="button"]:hover,
.search-overlay-close[type="button"]:focus-visible {
background: rgba(220, 193, 143, 0.12) !important;
border-color: rgba(220, 193, 143, 0.46) !important;
color: var(--gold-light) !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
outline: none !important;
transform: none !important;
}
@media (max-width: 620px) {
.search-overlay {
padding: 16px !important;
}
.search-overlay-panel {
padding: 58px 20px 24px !important;
}
.search-overlay-panel .eyebrow,
.search-overlay-panel #searchOverlayTitle,
.search-overlay-panel h2 {
margin-right: 44px !important;
}
.search-overlay-panel .search-form,
.search-overlay-panel .wp-block-search,
.search-overlay-panel .spmc-search-form {
margin-top: 26px !important;
}
.modal-close,
.modal-close[type="button"],
.search-overlay-close,
.search-overlay-close[type="button"] {
top: 14px !important;
right: 14px !important;
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
}
} @media (max-width: 860px) {
body.spmc-mobile-nav-open {
overflow: hidden !important;
touch-action: none;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav,
body.spmc-mobile-nav-open .spmc-demo-main-nav.is-open {
position: fixed !important;
top: var(--spmc-admin-bar-height, 0px) !important;
right: 0 !important;
bottom: 0 !important;
left: auto !important;
width: min(92vw, 410px) !important;
height: calc(100dvh - var(--spmc-admin-bar-height, 0px)) !important;
max-height: calc(100dvh - var(--spmc-admin-bar-height, 0px)) !important;
min-height: 0 !important;
padding: calc(var(--spmc-header-height, 82px) + 22px) 18px 34px !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 5px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-gutter: stable both-edges !important;
transform: translateX(0) !important;
box-sizing: border-box !important;
}
body:not(.spmc-mobile-nav-open) .spmc-demo-main-nav:not(.is-open) {
transform: translateX(100%) !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav > a,
body.spmc-mobile-nav-open .spmc-demo-main-nav > .nav-item,
body.spmc-mobile-nav-open .spmc-demo-main-nav > .nav-item.has-mega {
position: relative !important;
flex: 0 0 auto !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 100% !important;
overflow: visible !important;
box-sizing: border-box !important;
z-index: auto !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav > .nav-item.has-mega::after,
body.spmc-mobile-nav-open .spmc-demo-main-nav > .nav-item.has-mega::before {
display: none !important;
content: none !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav > a,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-trigger {
position: relative !important;
z-index: 1 !important;
display: flex !important;
width: 100% !important;
min-height: 52px !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
margin: 0 !important;
padding: 14px 16px !important;
border: 1px solid transparent !important;
border-radius: 15px !important;
background: transparent !important;
box-shadow: none !important;
box-sizing: border-box !important;
transform: none !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .nav-item.has-mega > .mega-menu,
body.spmc-mobile-nav-open .spmc-demo-main-nav .nav-item.has-mega:hover > .mega-menu,
body.spmc-mobile-nav-open .spmc-demo-main-nav .nav-item.has-mega:focus-within > .mega-menu {
position: static !important;
inset: auto !important;
left: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
z-index: auto !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
overflow: hidden !important;
overflow-y: hidden !important;
overflow-x: hidden !important;
transform: none !important;
transition: opacity 0.18s ease, visibility 0s linear 0.18s !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .nav-item.has-mega.is-open > .mega-menu,
body.spmc-mobile-nav-open .spmc-demo-main-nav .nav-item.has-mega.is-open:hover > .mega-menu,
body.spmc-mobile-nav-open .spmc-demo-main-nav .nav-item.has-mega.is-open:focus-within > .mega-menu {
height: auto !important;
max-height: none !important;
margin: 5px 0 10px !important;
padding: 4px 0 8px !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
overflow: visible !important;
overflow-y: visible !important;
overflow-x: hidden !important;
transition-delay: 0s !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu:first-child,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu:last-child {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 8px 0 !important;
padding: 6px !important;
border: 1px solid rgba(220, 193, 143, 0.18) !important;
border-radius: 18px !important;
background: rgba(255, 255, 255, 0.035) !important;
overflow: visible !important;
box-sizing: border-box !important;
transform: none !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header.mega-col-toggle {
position: relative !important;
display: grid !important;
grid-template-columns: 24px minmax(0, 1fr) 24px !important;
align-items: center !important;
width: 100% !important;
min-height: 54px !important;
margin: 0 !important;
padding: 14px !important;
gap: 10px !important;
border: 1px solid transparent !important;
border-radius: 14px !important;
background: transparent !important;
overflow: hidden !important;
box-sizing: border-box !important;
transform: none !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-submenu-panel,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu > .mega-submenu-panel,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu:not(.is-sub-open) > .mega-submenu-panel {
position: static !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 8px !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
overflow: hidden !important;
transform: none !important;
transition: opacity 0.18s ease, visibility 0s linear 0.18s !important;
box-sizing: border-box !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-submenu-panel {
height: auto !important;
max-height: none !important;
padding: 9px 8px 4px !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
overflow: visible !important;
transition-delay: 0s !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu:not(.is-sub-open) > .mega-submenu-panel a {
display: none !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-submenu-panel a {
position: relative !important;
display: grid !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 44px !important;
margin: 0 0 7px !important;
padding: 11px 14px 11px 38px !important;
grid-template-columns: minmax(0, 1fr) !important;
align-items: center !important;
border: 1px solid rgba(220, 193, 143, 0.12) !important;
border-radius: 14px !important;
background: rgba(255, 255, 255, 0.025) !important;
color: var(--text-muted) !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
box-sizing: border-box !important;
transform: none !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col-caret,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-trigger span {
flex: 0 0 auto !important;
transition: transform 0.2s ease !important;
}
} html,
body,
button,
input,
textarea,
select,
.wp-block,
.site,
.spmc-header,
.spmc-footer,
.spmc-service-page,
.search-modal,
.consultation-modal {
font-family: var(--font-primary) !important;
}
h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.logo-text,
.logo-title,
.mega-title,
.service-hero-title,
.article-hero-title,
.archive-hero-title,
.search-modal-title,
.modal-title,
.value-title,
.process-title,
.cta-title,
.card-title,
.post-title,
.entry-title,
.widget-title {
font-family: var(--font-heading) !important;
font-weight: 700;
letter-spacing: -0.025em;
}
p,
li,
a,
span,
small,
label,
blockquote,
table,
th,
td,
input,
textarea,
select {
font-family: var(--font-primary) !important;
} .hero-title,
.service-hero-title,
.article-hero-title,
.archive-hero-title {
font-weight: 800;
letter-spacing: -0.04em;
}
.section-title,
.service-section-title,
.block-title {
font-weight: 800;
letter-spacing: -0.03em;
} body,
.service-card,
.value-row,
.mega-link,
.article-rich-text,
.spmc-service-page {
line-height: 1.68;
} .ast-single-post .entry-title,
.ast-archive-title,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.wp-block-heading {
font-family: var(--font-heading) !important;
} .spmc-back-to-top {
position: fixed;
right: max(18px, env(safe-area-inset-right));
bottom: calc(22px + env(safe-area-inset-bottom));
z-index: 999;
width: 52px;
height: 52px;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
border: 1px solid rgba(214, 184, 123, 0.55);
border-radius: 999px;
background: linear-gradient(145deg, rgba(229, 197, 135, 0.96), rgba(177, 130, 66, 0.98));
color: #17212d;
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
cursor: pointer;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(14px) scale(0.94);
transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.spmc-back-to-top.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.spmc-back-to-top:hover,
.spmc-back-to-top:focus-visible {
transform: translateY(-3px) scale(1.02);
background: linear-gradient(145deg, #f1d99e, #c08b46);
box-shadow: 0 20px 42px rgba(0, 0, 0, 0.34), 0 0 0 3px rgba(229, 197, 135, 0.18);
outline: none;
}
.spmc-back-to-top-icon,
.spmc-back-to-top-icon svg {
width: 20px;
height: 20px;
display: block;
}
.spmc-back-to-top-icon svg {
fill: currentColor;
}
.spmc-back-to-top-text {
font-family: var(--font-primary);
font-size: 0.57rem;
line-height: 1;
font-weight: 800;
letter-spacing: 0.08em;
}
@media (max-width: 600px) {
.spmc-back-to-top {
right: max(14px, env(safe-area-inset-right));
bottom: calc(16px + env(safe-area-inset-bottom));
width: 48px;
height: 48px;
}
}
body.single-post .article-rich-text.article-content,
body.single-post .article-rich-text.article-content .entry-content {
font-family: var(--font-primary) !important;
font-size: clamp(1rem, 0.96rem + 0.16vw, 1.075rem) !important;
line-height: 1.82 !important;
font-weight: 400 !important;
letter-spacing: -0.005em;
color: var(--text-light);
}
body.single-post .article-rich-text.article-content p,
body.single-post .article-rich-text.article-content .lead,
body.single-post .article-rich-text.article-content > p:first-of-type,
body.single-post .article-rich-text.article-content li,
body.single-post .article-rich-text.article-content td,
body.single-post .article-rich-text.article-content th,
body.single-post .article-rich-text.article-content dd,
body.single-post .article-rich-text.article-content figcaption {
font-family: var(--font-primary) !important;
font-size: 1em !important;
line-height: inherit !important;
font-weight: 400 !important;
letter-spacing: inherit !important;
}
body.single-post .article-rich-text.article-content p,
body.single-post .article-rich-text.article-content .lead,
body.single-post .article-rich-text.article-content > p:first-of-type {
color: var(--text-muted) !important;
margin: 0 0 1.15em !important;
}
body.single-post .article-rich-text.article-content p:last-child,
body.single-post .article-rich-text.article-content ul:last-child,
body.single-post .article-rich-text.article-content ol:last-child {
margin-bottom: 0 !important;
}
body.single-post .article-rich-text.article-content ul,
body.single-post .article-rich-text.article-content ol {
margin: 0 0 1.18em !important;
padding-left: 1.35em !important;
gap: 0.42em !important;
}
body.single-post .article-rich-text.article-content li {
color: var(--text-muted) !important;
margin: 0 !important;
padding-left: 0.1em;
}
body.single-post .article-rich-text.article-content strong,
body.single-post .article-rich-text.article-content b {
font-weight: 750 !important;
color: var(--text-white);
}
body.single-post .article-rich-text.article-content h2,
body.single-post .article-rich-text.article-content h3,
body.single-post .article-rich-text.article-content h4,
body.single-post .article-rich-text.article-content h5,
body.single-post .article-rich-text.article-content h6 {
font-family: var(--font-heading) !important;
line-height: 1.28 !important;
font-weight: 800 !important;
letter-spacing: -0.025em !important;
color: var(--text-white) !important;
}
body.single-post .article-rich-text.article-content h2 {
font-size: clamp(1.38rem, 1.15rem + 0.78vw, 1.78rem) !important;
margin: 2.1em 0 0.72em !important;
}
body.single-post .article-rich-text.article-content h3 {
font-size: clamp(1.16rem, 1.04rem + 0.42vw, 1.38rem) !important;
margin: 1.75em 0 0.62em !important;
}
body.single-post .article-rich-text.article-content h4,
body.single-post .article-rich-text.article-content h5,
body.single-post .article-rich-text.article-content h6 {
font-size: 1.08em !important;
margin: 1.45em 0 0.5em !important;
}
body.single-post .article-rich-text.article-content blockquote,
body.single-post .article-rich-text.article-content blockquote p {
font-family: var(--font-primary) !important;
font-size: 1.02em !important;
line-height: 1.76 !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
}
body.single-post .article-rich-text.article-content blockquote {
margin: 1.7em 0 !important;
padding: 0.85em 0 0.85em 1.25em !important;
border-left: 3px solid var(--gold-primary) !important;
color: var(--text-light) !important;
}
body.single-post .article-rich-text.article-content blockquote p {
margin-bottom: 0.75em !important;
color: inherit !important;
}
body.single-post .article-rich-text.article-content blockquote p:last-child {
margin-bottom: 0 !important;
}
body.single-post .article-rich-text.article-content a {
color: var(--gold-primary);
text-underline-offset: 0.18em;
}
body.single-post .article-rich-text.article-content > * {
max-width: 100%;
}
@media (max-width: 600px) {
body.single-post .article-rich-text.article-content,
body.single-post .article-rich-text.article-content .entry-content {
font-size: 1rem !important;
line-height: 1.78 !important;
}
body.single-post .article-rich-text.article-content h2 {
margin-top: 1.75em !important;
}
} @media (max-width: 860px) {
.site-header .hamburger {
position: relative !important;
display: inline-flex !important;
flex: 0 0 42px !important;
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
padding: 0 !important;
border: 1px solid rgba(220, 193, 143, 0.36) !important;
border-radius: 999px !important;
background: rgba(220, 193, 143, 0.08) !important;
color: var(--gold-light) !important;
box-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
overflow: visible !important;
z-index: 1003 !important;
}
.site-header .hamburger span {
display: block !important;
flex: 0 0 auto !important;
width: 18px !important;
height: 2px !important;
min-height: 2px !important;
margin: 0 !important;
border-radius: 999px !important;
background: currentColor !important;
color: inherit !important;
opacity: 1 !important;
visibility: visible !important;
transform-origin: center !important;
}
.site-header .hamburger.is-active {
color: var(--bg-dark) !important;
background: var(--gold-light) !important;
border-color: var(--gold-light) !important;
}
.site-header .hamburger.is-active span:nth-child(1) {
transform: translateY(7px) rotate(45deg) !important;
}
.site-header .hamburger.is-active span:nth-child(2) {
opacity: 0 !important;
}
.site-header .hamburger.is-active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg) !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-trigger > span,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col-caret {
display: inline-flex !important;
flex: 0 0 24px !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
align-items: center !important;
justify-content: center !important;
color: var(--gold-light) !important;
opacity: 1 !important;
visibility: visible !important;
line-height: 1 !important;
font-size: 0.86rem !important;
text-indent: 0 !important;
overflow: visible !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header.mega-col-toggle .mega-svg,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header.mega-col-toggle svg,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-svg {
display: block !important;
flex: 0 0 22px !important;
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
max-width: 22px !important;
max-height: 22px !important;
justify-self: center !important;
align-self: center !important;
color: var(--gold-light) !important;
stroke: currentColor !important;
fill: none !important;
opacity: 1 !important;
visibility: visible !important;
overflow: visible !important;
transform: none !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-svg path,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-svg circle,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-svg line,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-svg polyline,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-svg rect {
stroke: currentColor !important;
opacity: 1 !important;
visibility: visible !important;
vector-effect: non-scaling-stroke;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header.mega-col-toggle {
grid-template-columns: 28px minmax(0, 1fr) 28px !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header.mega-col-toggle:hover .mega-svg,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header.mega-col-toggle:focus-visible .mega-svg,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-header.mega-col-toggle .mega-svg,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-header.mega-col-toggle .mega-col-caret {
color: var(--gold-light) !important;
}
} .home #about .about-media-wrapper,
.front-page #about .about-media-wrapper,
#about.about .about-media-wrapper {
padding-bottom: 78px !important;
}
.home #about .about-image-frame .floating-badge,
.front-page #about .about-image-frame .floating-badge,
#about.about .about-image-frame .floating-badge {
position: absolute !important;
top: calc(100% + 18px) !important;
bottom: auto !important;
left: 0 !important;
right: auto !important;
width: min(100%, 360px) !important;
max-width: min(100%, 360px) !important;
transform: none !important;
z-index: 3 !important;
display: block !important;
padding: 18px 22px !important;
border-radius: 18px !important;
background: linear-gradient(135deg, rgba(30, 36, 49, 0.96), rgba(22, 28, 39, 0.98)) !important;
border-color: rgba(214, 184, 123, 0.42) !important;
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26) !important;
}
@media (max-width: 920px) {
.home #about .about-media-wrapper,
.front-page #about .about-media-wrapper,
#about.about .about-media-wrapper {
padding-bottom: 82px !important;
}
.home #about .about-image-frame .floating-badge,
.front-page #about .about-image-frame .floating-badge,
#about.about .about-image-frame .floating-badge {
left: 50% !important;
right: auto !important;
top: calc(100% + 16px) !important;
bottom: auto !important;
width: min(100%, 420px) !important;
max-width: min(100%, 420px) !important;
transform: translateX(-50%) !important;
text-align: center !important;
}
}
@media (max-width: 620px) {
.home #about .about-media-wrapper,
.front-page #about .about-media-wrapper,
#about.about .about-media-wrapper {
padding-bottom: 92px !important;
}
.home #about .about-image-frame .floating-badge,
.front-page #about .about-image-frame .floating-badge,
#about.about .about-image-frame .floating-badge {
top: calc(100% + 14px) !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
width: min(calc(100vw - 64px), 360px) !important;
max-width: min(calc(100vw - 64px), 360px) !important;
padding: 16px 18px !important;
}
} .home #about .about-media-wrapper,
.front-page #about .about-media-wrapper,
#about.about .about-media-wrapper {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
padding-bottom: 0 !important;
gap: 18px !important;
}
.home #about .about-image-frame,
.front-page #about .about-image-frame,
#about.about .about-image-frame {
position: relative !important;
display: block !important;
width: min(100%, 560px) !important;
max-width: 560px !important;
aspect-ratio: 4 / 3 !important;
min-height: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border-radius: 22px !important;
isolation: isolate !important;
}
.home #about .about-image-frame > img,
.front-page #about .about-image-frame > img,
#about.about .about-image-frame > img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
aspect-ratio: auto !important;
object-fit: cover !important;
object-position: center center !important;
transform: none !important;
opacity: 0.9 !important;
border-radius: inherit !important;
z-index: 1 !important;
}
.home #about .about-image-frame::before,
.front-page #about .about-image-frame::before,
#about.about .about-image-frame::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
transform: none !important;
border: 1px solid rgba(214, 184, 123, 0.36) !important;
border-radius: inherit !important;
pointer-events: none !important;
z-index: 2 !important;
}
.home #about .about-media-wrapper > .floating-badge,
.front-page #about .about-media-wrapper > .floating-badge,
#about.about .about-media-wrapper > .floating-badge {
position: static !important;
inset: auto !important;
display: block !important;
width: min(100%, 420px) !important;
max-width: 420px !important;
margin: 0 auto !important;
transform: none !important;
z-index: 3 !important;
padding: 18px 22px !important;
border-radius: 18px !important;
text-align: left !important;
background: linear-gradient(135deg, rgba(30, 36, 49, 0.96), rgba(22, 28, 39, 0.98)) !important;
border: 1px solid rgba(214, 184, 123, 0.42) !important;
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26) !important;
}
@media (max-width: 920px) {
.home #about .about-image-frame,
.front-page #about .about-image-frame,
#about.about .about-image-frame {
width: min(100%, 620px) !important;
max-width: 620px !important;
}
.home #about .about-media-wrapper > .floating-badge,
.front-page #about .about-media-wrapper > .floating-badge,
#about.about .about-media-wrapper > .floating-badge {
width: min(100%, 420px) !important;
max-width: 420px !important;
text-align: center !important;
}
}
@media (max-width: 620px) {
.home #about .about-media-wrapper,
.front-page #about .about-media-wrapper,
#about.about .about-media-wrapper {
gap: 14px !important;
}
.home #about .about-image-frame,
.front-page #about .about-image-frame,
#about.about .about-image-frame {
width: min(100%, calc(100vw - 48px)) !important;
max-width: calc(100vw - 48px) !important;
border-radius: 18px !important;
}
.home #about .about-media-wrapper > .floating-badge,
.front-page #about .about-media-wrapper > .floating-badge,
#about.about .about-media-wrapper > .floating-badge {
width: min(100%, calc(100vw - 48px)) !important;
max-width: calc(100vw - 48px) !important;
padding: 16px 18px !important;
border-radius: 16px !important;
}
} .spmc-contact-page .contact-main-grid {
gap: clamp(30px, 5vw, 64px) !important;
align-items: stretch !important;
}
.spmc-contact-page .contact-info-col {
width: 100% !important;
min-width: 0 !important;
padding: clamp(26px, 3vw, 40px) !important;
border-radius: 28px !important;
gap: 0 !important;
overflow: hidden !important;
}
.spmc-contact-page .contact-info-block {
width: 100% !important;
min-width: 0 !important;
}
.spmc-contact-page .contact-info-block h3 {
margin: 0 0 26px !important;
padding: 0 0 18px !important;
line-height: 1.25 !important;
border-bottom: 1px solid rgba(220, 193, 143, 0.26) !important;
}
.spmc-contact-page .contact-details-list {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.spmc-contact-page .contact-detail-item {
width: 100% !important;
min-width: 0 !important;
display: grid !important;
grid-template-columns: 52px minmax(0, 1fr) !important;
align-items: start !important;
gap: 18px !important;
padding: 19px 21px !important;
border-radius: 20px !important;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)) !important;
border: 1px solid rgba(220, 193, 143, 0.18) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease !important;
}
.spmc-contact-page .contact-detail-item:hover,
.spmc-contact-page .contact-detail-item:focus-within {
transform: translateY(-2px) !important;
background: linear-gradient(135deg, rgba(220, 193, 143, 0.13), rgba(255, 255, 255, 0.035)) !important;
border-color: rgba(220, 193, 143, 0.42) !important;
box-shadow: 0 16px 34px rgba(3, 8, 16, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}
.spmc-contact-page .contact-detail-icon {
width: 52px !important;
height: 52px !important;
border-radius: 16px !important;
display: grid !important;
place-items: center !important;
margin: 0 !important;
border-color: rgba(220, 193, 143, 0.36) !important;
background: rgba(220, 193, 143, 0.07) !important;
color: var(--gold-primary) !important;
}
.spmc-contact-page .contact-detail-icon svg {
width: 20px !important;
height: 20px !important;
display: block !important;
stroke: currentColor !important;
}
.spmc-contact-page .contact-detail-item:hover .contact-detail-icon,
.spmc-contact-page .contact-detail-item:focus-within .contact-detail-icon {
background: var(--gold-primary) !important;
border-color: var(--gold-primary) !important;
color: #17202d !important;
}
.spmc-contact-page .contact-detail-text {
min-width: 0 !important;
padding-top: 2px !important;
}
.spmc-contact-page .contact-detail-text h4 {
margin: 0 0 8px !important;
line-height: 1.28 !important;
letter-spacing: 0.085em !important;
}
.spmc-contact-page .contact-detail-text p {
margin: 0 !important;
line-height: 1.65 !important;
overflow-wrap: anywhere !important;
}
.spmc-contact-page .contact-detail-text p + p {
margin-top: 8px !important;
}
@media (max-width: 920px) {
.spmc-contact-page .contact-info-col {
padding: clamp(22px, 5vw, 32px) !important;
border-radius: 24px !important;
}
.spmc-contact-page .contact-info-block h3 {
margin-bottom: 22px !important;
}
}
@media (max-width: 620px) {
.spmc-contact-page .contact-info-col {
padding: 20px !important;
border-radius: 22px !important;
}
.spmc-contact-page .contact-details-list {
gap: 14px !important;
}
.spmc-contact-page .contact-detail-item {
grid-template-columns: 46px minmax(0, 1fr) !important;
gap: 14px !important;
padding: 16px !important;
border-radius: 18px !important;
}
.spmc-contact-page .contact-detail-icon {
width: 46px !important;
height: 46px !important;
border-radius: 14px !important;
}
.spmc-contact-page .contact-detail-text h4 {
font-size: 0.78rem !important;
letter-spacing: 0.075em !important;
}
.spmc-contact-page .contact-detail-text p {
font-size: 0.94rem !important;
line-height: 1.58 !important;
}
} @media (min-width: 921px) {
.home #about .about-media-wrapper,
.front-page #about .about-media-wrapper,
#about.about .about-media-wrapper {
position: relative !important;
display: block !important;
width: min(100%, 560px) !important;
max-width: 560px !important;
margin: 0 auto !important;
padding-bottom: 46px !important;
overflow: visible !important;
gap: 0 !important;
}
.home #about .about-image-frame,
.front-page #about .about-image-frame,
#about.about .about-image-frame {
width: 100% !important;
max-width: 560px !important;
margin: 0 !important;
overflow: hidden !important;
}
.home #about .about-media-wrapper > .floating-badge,
.front-page #about .about-media-wrapper > .floating-badge,
#about.about .about-media-wrapper > .floating-badge {
position: absolute !important;
left: -18px !important;
right: auto !important;
bottom: 12px !important;
top: auto !important;
width: min(360px, calc(100% - 28px)) !important;
max-width: 360px !important;
margin: 0 !important;
transform: none !important;
z-index: 5 !important;
text-align: left !important;
pointer-events: auto !important;
}
}
@media (min-width: 921px) and (max-width: 1100px) {
.home #about .about-media-wrapper > .floating-badge,
.front-page #about .about-media-wrapper > .floating-badge,
#about.about .about-media-wrapper > .floating-badge {
left: 14px !important;
bottom: 14px !important;
width: min(340px, calc(100% - 28px)) !important;
}
} .modal,
#consultModal {
padding: clamp(12px, 2.4vw, 28px) !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
#consultModal .modal-backdrop {
background: rgba(7, 10, 16, 0.78) !important;
}
#consultModal .modal-panel.spmc-form-shell {
width: min(94vw, 560px) !important;
max-width: 560px !important;
max-height: min(820px, calc(100dvh - 32px)) !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
padding: clamp(22px, 3vw, 30px) !important;
padding-top: clamp(54px, 5vw, 62px) !important;
border-radius: 24px !important;
overflow: hidden !important;
background: linear-gradient(180deg, rgba(35, 44, 61, 0.98), rgba(22, 28, 39, 0.99)) !important;
border: 1px solid rgba(220, 193, 143, 0.26) !important;
box-shadow: 0 32px 90px rgba(0, 0, 0, 0.48) !important;
box-sizing: border-box !important;
}
#consultModal .modal-panel > .eyebrow {
margin: 0 52px 8px 0 !important;
flex: 0 0 auto !important;
}
#consultModal .modal-panel #modalTitle {
margin: 0 52px 8px 0 !important;
font-size: clamp(1.35rem, 2.6vw, 1.9rem) !important;
line-height: 1.18 !important;
letter-spacing: -0.02em !important;
flex: 0 0 auto !important;
}
#consultModal .modal-desc {
margin: 0 0 16px !important;
font-size: 0.88rem !important;
line-height: 1.55 !important;
color: var(--text-muted) !important;
flex: 0 0 auto !important;
}
#consultModal .spmc-modal-form-body {
min-height: 0 !important;
flex: 1 1 auto !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 2px 6px 2px 0 !important;
margin-right: -6px !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior: contain !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(220, 193, 143, 0.42) rgba(255, 255, 255, 0.06) !important;
}
#consultModal .spmc-modal-form-body::-webkit-scrollbar {
width: 7px;
}
#consultModal .spmc-modal-form-body::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 999px;
}
#consultModal .spmc-modal-form-body::-webkit-scrollbar-thumb {
background: rgba(220, 193, 143, 0.42);
border-radius: 999px;
}
#consultModal .fluentform,
#consultModal .frm-fluent-form,
#consultModal form {
margin: 0 !important;
}
#consultModal .ff-el-group,
#consultModal .fluentform .ff-el-group {
margin-bottom: 11px !important;
}
#consultModal .ff-el-input--label,
#consultModal .ff-el-input--label label,
#consultModal .fluentform label {
margin-bottom: 5px !important;
font-size: 0.78rem !important;
line-height: 1.25 !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
}
#consultModal .fluentform input,
#consultModal .fluentform select,
#consultModal .fluentform textarea,
#consultModal input,
#consultModal select,
#consultModal textarea {
min-height: 40px !important;
height: auto !important;
padding: 10px 13px !important;
border-radius: 14px !important;
border: 1px solid rgba(220, 193, 143, 0.24) !important;
background: rgba(255, 250, 241, 0.065) !important;
color: var(--text-light) !important;
font-size: 0.88rem !important;
line-height: 1.35 !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
#consultModal .fluentform textarea,
#consultModal textarea {
min-height: 82px !important;
max-height: 140px !important;
resize: vertical !important;
}
#consultModal .fluentform select,
#consultModal select {
padding-right: 38px !important;
}
#consultModal .fluentform input:focus,
#consultModal .fluentform select:focus,
#consultModal .fluentform textarea:focus,
#consultModal input:focus,
#consultModal select:focus,
#consultModal textarea:focus {
border-color: rgba(220, 193, 143, 0.62) !important;
box-shadow: 0 0 0 3px rgba(220, 193, 143, 0.12) !important;
outline: none !important;
}
#consultModal .ff_submit_btn_wrapper,
#consultModal .ff-el-group.ff_submit_btn_wrapper,
#consultModal .ff-el-group:has(.ff-btn-submit),
#consultModal .ff-el-group:has(button[type="submit"]) {
margin: 14px 0 0 !important;
padding: 0 !important;
}
#consultModal .ff-btn-submit,
#consultModal .fluentform button[type="submit"],
#consultModal .fluentform input[type="submit"],
#consultModal button[type="submit"],
#consultModal input[type="submit"] {
position: relative !important;
width: 100% !important;
min-height: 46px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 13px 20px !important;
margin: 0 !important;
border: 1px solid rgba(229, 207, 179, 0.72) !important;
border-radius: 999px !important;
background: linear-gradient(135deg, var(--gold-light), var(--gold-primary)) !important;
color: #151a22 !important;
font-family: var(--font-primary) !important;
font-size: 0.84rem !important;
font-weight: 800 !important;
line-height: 1.1 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
text-align: center !important;
text-decoration: none !important;
box-shadow: 0 16px 34px rgba(220, 193, 143, 0.20) !important;
transform: none !important;
overflow: hidden !important;
cursor: pointer !important;
appearance: none !important;
-webkit-appearance: none !important;
box-sizing: border-box !important;
}
#consultModal .ff-btn-submit::before,
#consultModal .ff-btn-submit::after,
#consultModal .fluentform button[type="submit"]::before,
#consultModal .fluentform button[type="submit"]::after,
#consultModal button[type="submit"]::before,
#consultModal button[type="submit"]::after {
content: none !important;
display: none !important;
}
#consultModal .ff-btn-submit:hover,
#consultModal .ff-btn-submit:focus-visible,
#consultModal .fluentform button[type="submit"]:hover,
#consultModal .fluentform button[type="submit"]:focus-visible,
#consultModal button[type="submit"]:hover,
#consultModal button[type="submit"]:focus-visible {
background: linear-gradient(135deg, #fff0d5, var(--gold-light)) !important;
color: #111722 !important;
border-color: rgba(255, 240, 213, 0.88) !important;
box-shadow: 0 18px 42px rgba(220, 193, 143, 0.30) !important;
transform: translateY(-1px) !important;
outline: none !important;
}
#consultModal .modal-close,
#consultModal .modal-close[type="button"] {
top: 16px !important;
right: 16px !important;
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
border-radius: 999px !important;
display: grid !important;
place-items: center !important;
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(220, 193, 143, 0.30) !important;
}
#consultModal .modal-close::before,
#consultModal .modal-close::after,
#consultModal .modal-close[type="button"]::before,
#consultModal .modal-close[type="button"]::after {
width: 16px !important;
height: 1.7px !important;
}
#consultModal .ff-el-is-error input,
#consultModal .ff-el-is-error select,
#consultModal .ff-el-is-error textarea {
border-color: rgba(255, 132, 132, 0.72) !important;
}
#consultModal .ff-el-is-error .text-danger,
#consultModal .error,
#consultModal .ff-el-help-message {
margin-top: 5px !important;
font-size: 0.75rem !important;
line-height: 1.35 !important;
}
@media (max-width: 620px) {
#consultModal {
align-items: flex-start !important;
padding: max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
}
#consultModal .modal-panel.spmc-form-shell {
width: 100% !important;
max-width: 100% !important;
max-height: calc(100dvh - 22px) !important;
padding: 58px 18px 18px !important;
border-radius: 20px !important;
}
#consultModal .modal-panel > .eyebrow {
margin-right: 46px !important;
}
#consultModal .modal-panel #modalTitle {
margin-right: 46px !important;
font-size: 1.28rem !important;
}
#consultModal .modal-desc {
margin-bottom: 13px !important;
font-size: 0.82rem !important;
}
#consultModal .spmc-modal-form-body {
padding-right: 3px !important;
margin-right: -3px !important;
}
#consultModal .ff-el-group,
#consultModal .fluentform .ff-el-group {
margin-bottom: 9px !important;
}
#consultModal .fluentform input,
#consultModal .fluentform select,
#consultModal .fluentform textarea,
#consultModal input,
#consultModal select,
#consultModal textarea {
min-height: 39px !important;
padding: 9px 12px !important;
border-radius: 13px !important;
font-size: 0.86rem !important;
}
#consultModal .fluentform textarea,
#consultModal textarea {
min-height: 72px !important;
max-height: 112px !important;
}
#consultModal .modal-close,
#consultModal .modal-close[type="button"] {
top: 12px !important;
right: 12px !important;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
}
#consultModal .ff-btn-submit,
#consultModal .fluentform button[type="submit"],
#consultModal .fluentform input[type="submit"],
#consultModal button[type="submit"],
#consultModal input[type="submit"] {
min-height: 44px !important;
padding: 12px 18px !important;
font-size: 0.80rem !important;
letter-spacing: 0.045em !important;
}
} .spmc-contact-page .contact-form-col {
padding: clamp(28px, 4vw, 44px) !important;
border-radius: 28px !important;
border: 1px solid rgba(220, 193, 143, 0.24) !important;
background: linear-gradient(180deg, rgba(38, 48, 66, 0.88), rgba(25, 32, 45, 0.96)) !important;
box-shadow: 0 22px 70px rgba(4, 8, 14, 0.26) !important;
overflow: hidden !important;
}
.spmc-contact-page .contact-form-col:hover {
border-color: rgba(220, 193, 143, 0.34) !important;
box-shadow: 0 26px 78px rgba(4, 8, 14, 0.30) !important;
}
.spmc-contact-page .contact-form-col h3,
.spmc-contact-page .contact-form-col .form-desc {
position: relative !important;
z-index: 1 !important;
}
.spmc-contact-page .spmc-contact-form-shortcode,
.spmc-contact-page .spmc-contact-form-shortcode .spmc-form-shell,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform,
.spmc-contact-page .spmc-contact-form-shortcode .frm-fluent-form,
.spmc-contact-page .spmc-contact-form-shortcode form {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
.spmc-contact-page .spmc-contact-form-shortcode .ff-el-group,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform .ff-el-group {
margin: 0 0 16px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.spmc-contact-page .spmc-contact-form-shortcode .ff-el-input--label,
.spmc-contact-page .spmc-contact-form-shortcode .ff-el-input--label label,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform label {
display: block !important;
margin: 0 0 7px !important;
padding: 0 !important;
color: var(--text-muted) !important;
font-family: var(--font-primary) !important;
font-size: 0.78rem !important;
font-weight: 700 !important;
line-height: 1.35 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
.spmc-contact-page .spmc-contact-form-shortcode .fluentform input,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform select,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform textarea {
width: 100% !important;
min-height: 48px !important;
height: auto !important;
padding: 13px 16px !important;
border: 1px solid rgba(220, 193, 143, 0.24) !important;
border-radius: 16px !important;
background: rgba(255, 250, 241, 0.055) !important;
color: var(--text-white) !important;
font-family: var(--font-primary) !important;
font-size: 0.93rem !important;
line-height: 1.45 !important;
letter-spacing: 0 !important;
text-transform: none !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
outline: none !important;
transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
appearance: none !important;
-webkit-appearance: none !important;
box-sizing: border-box !important;
}
.spmc-contact-page .spmc-contact-form-shortcode .fluentform select {
padding-right: 42px !important;
background-image: linear-gradient(45deg, transparent 50%, rgba(220, 193, 143, 0.9) 50%), linear-gradient(135deg, rgba(220, 193, 143, 0.9) 50%, transparent 50%) !important;
background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50% !important;
background-size: 6px 6px, 6px 6px !important;
background-repeat: no-repeat !important;
}
.spmc-contact-page .spmc-contact-form-shortcode .fluentform select option {
background: #20293a !important;
color: var(--text-white) !important;
}
.spmc-contact-page .spmc-contact-form-shortcode .fluentform textarea {
min-height: 118px !important;
max-height: 220px !important;
resize: vertical !important;
}
.spmc-contact-page .spmc-contact-form-shortcode .fluentform input:focus,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform select:focus,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform textarea:focus {
border-color: rgba(220, 193, 143, 0.62) !important;
background: rgba(255, 250, 241, 0.075) !important;
box-shadow: 0 0 0 4px rgba(220, 193, 143, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}
.spmc-contact-page .spmc-contact-form-shortcode .fluentform input::placeholder,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform textarea::placeholder {
color: rgba(229, 232, 238, 0.45) !important;
}
.spmc-contact-page .spmc-contact-form-shortcode .ff_submit_btn_wrapper,
.spmc-contact-page .spmc-contact-form-shortcode .ff-el-group.ff_submit_btn_wrapper,
.spmc-contact-page .spmc-contact-form-shortcode .ff-el-group:has(.ff-btn-submit),
.spmc-contact-page .spmc-contact-form-shortcode .ff-el-group:has(button[type="submit"]) {
margin: 20px 0 0 !important;
padding: 0 !important;
}
.spmc-contact-page .spmc-contact-form-shortcode .ff-btn-submit,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform button[type="submit"],
.spmc-contact-page .spmc-contact-form-shortcode .fluentform input[type="submit"] {
position: relative !important;
width: 100% !important;
min-height: 50px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 14px 22px !important;
border: 1px solid rgba(229, 207, 179, 0.72) !important;
border-radius: 999px !important;
background: linear-gradient(135deg, var(--gold-light), var(--gold-primary)) !important;
color: #141923 !important;
font-family: var(--font-primary) !important;
font-size: 0.86rem !important;
font-weight: 800 !important;
line-height: 1.1 !important;
letter-spacing: 0.055em !important;
text-transform: uppercase !important;
text-align: center !important;
text-decoration: none !important;
box-shadow: 0 16px 36px rgba(220, 193, 143, 0.22) !important;
transform: none !important;
overflow: hidden !important;
cursor: pointer !important;
appearance: none !important;
-webkit-appearance: none !important;
box-sizing: border-box !important;
}
.spmc-contact-page .spmc-contact-form-shortcode .ff-btn-submit::before,
.spmc-contact-page .spmc-contact-form-shortcode .ff-btn-submit::after,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform button[type="submit"]::before,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform button[type="submit"]::after {
content: none !important;
display: none !important;
}
.spmc-contact-page .spmc-contact-form-shortcode .ff-btn-submit:hover,
.spmc-contact-page .spmc-contact-form-shortcode .ff-btn-submit:focus-visible,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform button[type="submit"]:hover,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform button[type="submit"]:focus-visible {
background: linear-gradient(135deg, #fff0d5, var(--gold-light)) !important;
color: #111722 !important;
border-color: rgba(255, 240, 213, 0.88) !important;
box-shadow: 0 20px 44px rgba(220, 193, 143, 0.30) !important;
transform: translateY(-1px) !important;
outline: none !important;
}
.spmc-contact-page .spmc-contact-form-shortcode .ff-el-is-error input,
.spmc-contact-page .spmc-contact-form-shortcode .ff-el-is-error select,
.spmc-contact-page .spmc-contact-form-shortcode .ff-el-is-error textarea {
border-color: rgba(255, 132, 132, 0.72) !important;
}
.spmc-contact-page .spmc-contact-form-shortcode .text-danger,
.spmc-contact-page .spmc-contact-form-shortcode .ff-el-help-message,
.spmc-contact-page .spmc-contact-form-shortcode .error {
margin-top: 6px !important;
color: #ffb0b0 !important;
font-size: 0.78rem !important;
line-height: 1.4 !important;
} .spmc-contact-page .spmc-contact-form-shortcode input[name="source_page"],
.spmc-contact-page .spmc-contact-form-shortcode input[name="source-page"],
.spmc-contact-page .spmc-contact-form-shortcode input[name="inputs[source_page]"],
.spmc-contact-page .spmc-contact-form-shortcode textarea[name="source_page"],
.spmc-contact-page .spmc-contact-form-shortcode select[name="source_page"] {
display: none !important;
}
.spmc-contact-page .spmc-contact-form-shortcode .ff-el-group:has(input[name="source_page"]),
.spmc-contact-page .spmc-contact-form-shortcode .ff-el-group:has(input[name="source-page"]),
.spmc-contact-page .spmc-contact-form-shortcode .ff-el-group:has(input[name="inputs[source_page]"]),
.spmc-contact-page .spmc-contact-form-shortcode .ff-el-group:has(textarea[name="source_page"]),
.spmc-contact-page .spmc-contact-form-shortcode .ff-el-group:has(select[name="source_page"]) {
display: none !important;
}
.spmc-contact-page .spmc-contact-form-shortcode .spmc-hide-source-field {
display: none !important;
}
@media (max-width: 768px) {
.spmc-contact-page .contact-form-col {
padding: 26px 18px !important;
border-radius: 22px !important;
}
.spmc-contact-page .spmc-contact-form-shortcode .ff-el-group,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform .ff-el-group {
margin-bottom: 13px !important;
}
.spmc-contact-page .spmc-contact-form-shortcode .fluentform input,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform select,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform textarea {
min-height: 46px !important;
padding: 12px 14px !important;
border-radius: 15px !important;
font-size: 0.91rem !important;
}
.spmc-contact-page .spmc-contact-form-shortcode .fluentform textarea {
min-height: 108px !important;
}
} #consultModal .ff-btn-submit,
#consultModal .fluentform button[type="submit"],
#consultModal .fluentform input[type="submit"],
.spmc-contact-page .spmc-contact-form-shortcode .ff-btn-submit,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform button[type="submit"],
.spmc-contact-page .spmc-contact-form-shortcode .fluentform input[type="submit"] {
color: #141923 !important;
-webkit-text-fill-color: #141923 !important;
text-indent: 0 !important;
font-size: 0.86rem !important;
font-weight: 800 !important;
line-height: 1.15 !important;
white-space: normal !important;
visibility: visible !important;
opacity: 1 !important;
}
#consultModal .ff-btn-submit *,
#consultModal .fluentform button[type="submit"] *,
.spmc-contact-page .spmc-contact-form-shortcode .ff-btn-submit *,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform button[type="submit"] * {
color: inherit !important;
-webkit-text-fill-color: currentColor !important;
display: inline !important;
visibility: visible !important;
opacity: 1 !important;
text-indent: 0 !important;
transform: none !important;
}
#consultModal .ff-btn-submit.is-empty::before,
#consultModal .fluentform button[type="submit"].is-empty::before,
.spmc-contact-page .spmc-contact-form-shortcode .ff-btn-submit.is-empty::before,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform button[type="submit"].is-empty::before {
content: "Gửi yêu cầu tư vấn" !important;
display: inline-block !important;
color: #141923 !important;
-webkit-text-fill-color: #141923 !important;
font-family: var(--font-primary) !important;
font-size: 0.86rem !important;
font-weight: 800 !important;
line-height: 1.15 !important;
letter-spacing: 0.055em !important;
text-transform: uppercase !important;
text-align: center !important;
}
#consultModal .ff-btn-submit:hover,
#consultModal .ff-btn-submit:focus-visible,
#consultModal .fluentform button[type="submit"]:hover,
#consultModal .fluentform button[type="submit"]:focus-visible,
.spmc-contact-page .spmc-contact-form-shortcode .ff-btn-submit:hover,
.spmc-contact-page .spmc-contact-form-shortcode .ff-btn-submit:focus-visible,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform button[type="submit"]:hover,
.spmc-contact-page .spmc-contact-form-shortcode .fluentform button[type="submit"]:focus-visible {
color: #111722 !important;
-webkit-text-fill-color: #111722 !important;
} .home .services .section-heading h2,
.home .services .service-card h3,
.home .services .service-card > a {
text-transform: uppercase !important;
}
.home .services .service-grid {
align-items: stretch;
}
.home .services .service-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%;
}
.home .services .service-icon-wrapper {
display: grid;
place-items: center;
margin: 0 auto 28px !important;
}
.home .services .service-card h3 {
width: 100%;
margin: 0 0 16px !important;
text-align: center !important;
font-weight: 800 !important;
letter-spacing: 0.045em !important;
}
.home .services .service-card p {
width: 100%;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
.home .services .service-card > a {
justify-content: center;
margin-top: auto;
text-align: center;
} blockquote,
blockquote p,
.wp-block-quote,
.wp-block-quote p,
.hero-quote,
.hero-quote p,
.hero-quote-box blockquote,
.hero-quote-box blockquote p,
.article-rich-text blockquote,
.article-rich-text blockquote p,
.entry-content blockquote,
.entry-content blockquote p {
color: var(--gold-primary) !important;
-webkit-text-fill-color: var(--gold-primary) !important;
font-weight: 700 !important;
}
blockquote cite,
.wp-block-quote cite,
.hero-quote-box cite {
color: var(--gold-primary) !important;
-webkit-text-fill-color: var(--gold-primary) !important;
font-weight: 700 !important;
}  body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .eyebrow,
body .section-label,
body .section-kicker,
body .hero-kicker,
body .card-label,
body .step-label,
body .btn,
body .button,
body button:not(.search-close):not(.modal-close):not(.menu-toggle):not(.mega-col-toggle),
body input[type="submit"],
body .read-more,
body .service-link,
body .nav-cta,
body .contact-form-submit,
body .ff-btn-submit {
text-transform: uppercase !important;
} :is(
.service-card,
.pillar-card,
.strategy-card,
.fin-service-card,
.mna-intro-card,
.value-glass-card,
.vm-card,
.team-card,
.tax-staffing-grid > *,
.pillars-grid > *,
.strategy-grid > *,
.fin-services-grid > *,
.values-grid > *
) {
display: flex;
flex-direction: column;
align-items: stretch;
}
:is(
.service-card,
.pillar-card,
.strategy-card,
.fin-service-card,
.mna-intro-card,
.value-glass-card,
.vm-card,
.team-card,
.tax-staffing-grid > *,
.pillars-grid > *,
.strategy-grid > *,
.fin-services-grid > *,
.values-grid > *
) :is(
.service-icon-wrapper,
.pillar-icon-wrapper,
.fin-service-icon-wrapper,
.focus-item-icon,
.value-check-icon,
.card-icon,
.icon-wrapper,
> svg
) {
margin-inline: auto !important;
align-self: center !important;
text-align: center !important;
}
:is(
.service-card,
.pillar-card,
.strategy-card,
.fin-service-card,
.mna-intro-card,
.value-glass-card,
.vm-card,
.team-card,
.tax-staffing-grid > *,
.pillars-grid > *,
.strategy-grid > *,
.fin-services-grid > *,
.values-grid > *
) :is(h2, h3, h4, h5, .card-title, .pillar-title, .service-title) {
width: 100%;
margin-inline: auto !important;
text-align: center !important;
} :is(
.service-card,
.pillar-card,
.strategy-card,
.fin-service-card,
.mna-intro-card,
.value-glass-card,
.vm-card,
.tax-staffing-grid > *,
.pillars-grid > *,
.strategy-grid > *,
.fin-services-grid > *,
.values-grid > *,
.focus-item,
.process-step-item,
.accordion-item
) :is(p, .card-description, .pillar-description, .service-description, .focus-desc) {
width: 100%;
text-align: justify !important;
text-justify: inter-word;
hyphens: auto;
}
:is(
.service-card,
.pillar-card,
.strategy-card,
.fin-service-card,
.mna-intro-card,
.value-glass-card,
.vm-card,
.tax-staffing-grid > *,
.pillars-grid > *,
.strategy-grid > *,
.fin-services-grid > *,
.values-grid > *,
.focus-item
) :is(ul, ol) {
width: 100%;
text-align: left !important;
}
:is(
.service-card,
.pillar-card,
.strategy-card,
.fin-service-card,
.mna-intro-card,
.value-glass-card,
.vm-card,
.tax-staffing-grid > *,
.pillars-grid > *,
.strategy-grid > *,
.fin-services-grid > *,
.values-grid > *
) :is(.service-link, .read-more, .btn, .button) {
align-self: center;
margin-top: auto;
} :is(.service-grid, .pillars-grid, .strategy-grid, .fin-services-grid, .values-grid, .mna-grid, .tax-staffing-grid) {
align-items: stretch;
}
:is(.service-grid, .pillars-grid, .strategy-grid, .fin-services-grid, .values-grid, .mna-grid, .tax-staffing-grid) > * {
height: 100%;
}
@media (max-width: 767px) {
:is(
.service-card,
.pillar-card,
.strategy-card,
.fin-service-card,
.mna-intro-card,
.value-glass-card,
.vm-card,
.tax-staffing-grid > *,
.pillars-grid > *,
.strategy-grid > *,
.fin-services-grid > *,
.values-grid > *
) :is(p, .card-description, .pillar-description, .service-description, .focus-desc) {
text-align: left !important;
hyphens: none;
}
} #consultModal .spmc-form-progress {
display: none;
align-items: center;
gap: 12px;
margin: 0 0 16px;
padding: 12px 14px;
border: 1px solid rgba(216, 189, 122, 0.45);
border-radius: 10px;
background: rgba(216, 189, 122, 0.1);
color: var(--gold, #d8bd7a);
font-size: 14px;
font-weight: 700;
line-height: 1.5;
}
#consultModal .spmc-form-progress[aria-hidden="false"] { display: flex; }
#consultModal .spmc-form-progress-spinner {
flex: 0 0 20px;
width: 20px;
height: 20px;
border: 2px solid rgba(216, 189, 122, 0.28);
border-top-color: currentColor;
border-radius: 50%;
animation: spmc-form-spin .75s linear infinite;
}
#consultModal .spmc-form-progress.is-success {
color: #bfe2c8;
border-color: rgba(104, 190, 126, .4);
background: rgba(71, 154, 92, .13);
}
#consultModal .spmc-form-progress.is-error {
color: #ffd0ca;
border-color: rgba(234, 113, 96, .45);
background: rgba(198, 67, 52, .13);
}
#consultModal .spmc-form-progress.is-success .spmc-form-progress-spinner,
#consultModal .spmc-form-progress.is-error .spmc-form-progress-spinner { display: none; }
#consultModal.is-submitting .modal-close,
#consultModal.is-submitting .modal-backdrop {
cursor: wait !important;
}
#consultModal.is-submitting .modal-close {
opacity: .42;
pointer-events: none;
}
#consultModal .spmc-is-sending {
position: relative;
cursor: wait !important;
opacity: .82;
}
#consultModal .spmc-is-sending::after {
content: "";
display: inline-block;
width: 15px;
height: 15px;
margin-left: 10px;
border: 2px solid rgba(255,255,255,.4);
border-top-color: currentColor;
border-radius: 50%;
vertical-align: -2px;
animation: spmc-form-spin .75s linear infinite;
}
@keyframes spmc-form-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
#consultModal .spmc-form-progress-spinner,
#consultModal .spmc-is-sending::after { animation-duration: 1.8s; }
} .site-header .logo.logo-image-only {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 0;
min-width: 0;
}
.site-header .logo.logo-image-only .logo-image {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
}
.site-header .logo.logo-image-only .logo-image img {
display: block;
width: auto;
max-width: min(210px, 42vw);
height: auto;
max-height: 58px;
object-fit: contain;
}
.site-header .logo.logo-image-only .logo-stack,
.site-header .logo.logo-image-only .logo-text,
.site-header .logo.logo-image-only .logo-title,
.site-header .logo.logo-image-only .logo-subtitle {
display: none !important;
}
@media (max-width: 767px) {
.site-header .logo.logo-image-only .logo-image img {
max-width: 150px;
max-height: 46px;
}
} .site-header.editorial-header {
padding: 12px 0 !important;
}
.site-header.editorial-header.scrolled {
padding: 8px 0 !important;
}
.site-header.editorial-header .header-inner {
min-height: 44px;
}
.site-header .logo.logo-image-only .logo-image img {
max-width: min(190px, 38vw);
max-height: 42px;
}
.spmc-demo-main-nav > a,
.spmc-demo-main-nav > .nav-item > .mega-trigger {
min-height: 38px;
padding-top: 7px !important;
padding-bottom: 7px !important;
line-height: 1.2;
}
.header-actions {
gap: 9px;
}
.header-search-toggle,
.header-cta,
.site-header .hamburger {
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
}
.header-cta {
padding-left: 14px;
padding-right: 14px;
}
@media (max-width: 860px) {
.site-header.editorial-header,
.site-header.editorial-header.scrolled {
padding: 8px 0 !important;
}
.site-header.editorial-header .header-inner {
min-height: 42px;
gap: 8px;
}
.site-header .logo.logo-image-only .logo-image img {
max-width: 138px;
max-height: 38px;
}
.header-search-toggle,
.header-cta,
.site-header .hamburger {
flex-basis: 40px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
}
}
@media (max-width: 420px) {
.site-header .logo.logo-image-only .logo-image img {
max-width: 120px;
max-height: 34px;
}
.header-actions {
gap: 6px;
}
} .spmc-policy-page { width:100%; max-width:100%; margin:0; padding:0; background:var(--bg-dark); }
.spmc-policy-hero { padding:clamp(90px,11vw,150px) 0 clamp(48px,7vw,84px); background:linear-gradient(135deg,rgba(197,163,90,.14),rgba(255,255,255,.02)); border-bottom:1px solid rgba(197,163,90,.22); }
.spmc-policy-hero-inner { max-width:900px; }
.spmc-policy-hero h1 { margin:10px 0 18px; max-width:850px; font-size:clamp(2rem,4vw,4rem); line-height:1.08; text-transform:uppercase; }
.spmc-policy-hero p:not(.eyebrow) { max-width:760px; margin:0; font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.8; color:var(--text-muted); text-align:justify; }
.spmc-policy-meta { margin-top:20px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.spmc-policy-content-section { padding:clamp(54px,8vw,100px) 0; }
.spmc-policy-content { width:min(100%,900px); margin:0 auto; padding:clamp(26px,5vw,56px); border:1px solid rgba(197,163,90,.25); border-radius:18px; background:rgba(255,255,255,.035); box-shadow:0 24px 70px rgba(0,0,0,.18); }
.spmc-policy-content section + section { margin-top:38px; padding-top:34px; border-top:1px solid rgba(197,163,90,.16); }
.spmc-policy-content h2 { margin:0 0 16px; color:var(--gold); font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.35; text-transform:uppercase; }
.spmc-policy-content p,.spmc-policy-content li { font-size:1rem; line-height:1.85; color:var(--text-muted); text-align:justify; }
.spmc-policy-content ul,.spmc-policy-content ol { margin:14px 0 0; padding-left:1.4rem; }
.spmc-policy-content li + li { margin-top:8px; }
.spmc-policy-content a { color:var(--gold); font-weight:700; text-decoration-thickness:1px; text-underline-offset:3px; }
.spmc-policy-note { margin-top:42px; padding:20px 22px; border-left:4px solid var(--gold); border-radius:10px; background:rgba(197,163,90,.09); color:var(--gold); font-weight:700; line-height:1.75; }
.footer-legal { border-top:1px solid rgba(197,163,90,.18); background:rgba(0,0,0,.18); }
.footer-legal-inner { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:22px; padding-top:13px; padding-bottom:13px; }
.footer-legal-label { flex:0 0 auto; color:var(--gold); font-size:.7rem; font-weight:800; letter-spacing:.12em; }
.footer-legal-nav { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px 20px; }
.footer-legal-nav a { color:var(--text-muted); font-size:.76rem; font-weight:600; line-height:1.4; text-decoration:none; text-transform:uppercase; transition:color .2s ease; }
.footer-legal-nav a:hover,.footer-legal-nav a:focus-visible { color:var(--gold); }
@media(max-width:860px){ .footer-legal-inner { align-items:flex-start; flex-direction:column; gap:12px; padding-top:18px; padding-bottom:20px; } .footer-legal-nav { justify-content:flex-start; gap:10px 16px; } }
@media(max-width:600px){ .spmc-policy-hero { padding-top:78px; } .spmc-policy-hero p:not(.eyebrow),.spmc-policy-content p,.spmc-policy-content li { text-align:left; } .spmc-policy-content { padding:24px 20px; border-radius:14px; } .footer-legal-nav { display:grid; grid-template-columns:1fr; width:100%; } .footer-legal-nav a { display:block; padding:7px 0; border-bottom:1px solid rgba(197,163,90,.10); } }  @media (min-width: 1121px) {
.site-header .header-actions .header-cta {
width: auto !important;
min-width: max-content !important;
max-width: none !important;
height: 38px !important;
padding: 0 15px !important;
gap: 8px !important;
white-space: nowrap !important;
overflow: visible !important;
flex: 0 0 auto !important;
box-sizing: border-box !important;
}
.site-header .header-actions .header-cta span {
display: inline-block !important;
width: auto !important;
max-width: none !important;
line-height: 1 !important;
white-space: nowrap !important;
overflow: visible !important;
}
.site-header .header-actions .header-cta .phone-svg {
flex: 0 0 14px !important;
}
} @media (max-width: 860px), (hover: none) and (pointer: coarse) {
body.spmc-mobile-nav-open .spmc-demo-main-nav > a,
body.spmc-mobile-nav-open .spmc-demo-main-nav > .nav-item,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-trigger,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header.mega-col-toggle,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-submenu-panel,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-submenu-panel a,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu {
animation: none !important;
transform: none !important;
translate: none !important;
scale: 1 !important;
transition-property: background-color, border-color, color, opacity, visibility, max-height !important;
transition-duration: .16s !important;
transition-timing-function: ease !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav > a:hover,
body.spmc-mobile-nav-open .spmc-demo-main-nav > a:active,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-trigger:hover,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-trigger:active,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header.mega-col-toggle:hover,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header.mega-col-toggle:active,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-submenu-panel a:hover,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-submenu-panel a:active {
transform: none !important;
translate: none !important;
scale: 1 !important;
} body.spmc-mobile-nav-open .spmc-demo-main-nav > .nav-item:not(.is-open) > .mega-trigger,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu:not(.is-sub-open) > .mega-header.mega-col-toggle {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav > .nav-item.is-open > .mega-trigger,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-col.has-mobile-submenu.is-sub-open > .mega-header.mega-col-toggle {
background: rgba(220, 193, 143, .11) !important;
border-color: rgba(220, 193, 143, .34) !important;
box-shadow: none !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-trigger:focus,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header.mega-col-toggle:focus,
body.spmc-mobile-nav-open .spmc-demo-main-nav a:focus {
outline: none !important;
}
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-trigger:focus-visible,
body.spmc-mobile-nav-open .spmc-demo-main-nav .mega-header.mega-col-toggle:focus-visible,
body.spmc-mobile-nav-open .spmc-demo-main-nav a:focus-visible {
outline: 2px solid rgba(220, 193, 143, .72) !important;
outline-offset: 2px !important;
}
}