:root {
--space-xs: 8px;
--space-s: 16px;
--space-m: 24px;
--space-l: 40px;
--space-xl: 60px;
--space-xxl: 80px;
--space-xxxl: 120px;
--color-primary: #002868;
--color-accent: #c2a875;
--color-bg: #ffffff;
--color-text: #1a1a1a;
}
*,*::before,*::after {box-sizing: border-box;}
img {display: inline-flex; max-width: 100%; height: auto;}
:focus-visible { outline: none; }
h1, h2, h3, h4 {color: #1e202b;margin: 0;}
h1 {font-size: 2.2em;line-height: 1.15;font-weight: 500;}
h2 {font-size: 1.8em;   line-height: 1.3;font-weight: 500;}
h3 {font-size: 1.4em; line-height: 1.35;font-weight: 500;}
h4 {font-size: 1em;line-height: 1.4;font-weight: 400;letter-spacing: 0.3px;}
a {color: var(--color-text-primary); text-decoration: none;}
a:hover {}
.animaline { text-decoration: none;
background-image: linear-gradient(currentColor,currentColor);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% 1px;
transition: background-size .6s cubic-bezier(.77, 0, .18, 1);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;}
.animaline:hover {background-size: 100% 1px;}
strong, b {font-weight: 500;}
.btn__light  {line-height: 1; padding:10px 15px;border: 1px solid #ddddddc9; transition: linear .3s;}
.home-hero__buttons a:first-child {color: #1e202b;border-color: #dccdb7;background: #dccdb7;}
.home-hero__buttons a:first-child:hover {color:#fff; background: #1e202b; border-color: #1e202b;}
.btn__light:hover  {color: #1e202b;border-color: #ddd;background: #ddd;}
input,textarea {padding: 15px;border: 1px solid var(--color-border-input);background: var(--color-bg-muted);font-family: inherit;}
button,input,select,textarea {font-family: "Khand", sans-serif;font-size: 16px;font-weight: 400;letter-spacing: 1px;}
label {font-size: 16px;} ::-webkit-scrollbar {
width: 4px;
height: 12px;
}
::-webkit-scrollbar-track {
background-color: #ddd;
box-shadow: 0 0 1px 1px #ffffff inset;
}
::-webkit-scrollbar-thumb {
background:  #dccdb7;
}
::-webkit-scrollbar-thumb:hover {background: #111}
.container {width: 100%;padding: 0 15px;}
.container--narrow { max-width: 960px; margin: 0 auto; padding: 0 15px;}
html {height: 100%;width: 100%;scroll-behavior: smooth;}
body {font-family: "Khand", sans-serif;font-optical-sizing: auto;font-size: 19px;font-weight: 400;letter-spacing: .5px;font-style: normal;line-height: 1.6;color:#555;margin:0;min-height:100%;background: var(--color-bg);}
.site-header {width: 100%;background: #1e202b;transition: transform 0.35s ease, opacity 0.3s ease;will-change: transform;    z-index: 2;
position: relative;}
.home-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
color: #fff;
}
.home-hero__bg {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;z-index: 0;}
.home-hero__overlay {position: absolute;inset: 0;background:linear-gradient(to right, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .70) 45%, rgb(255 255 255 / 80%) 100%);z-index: 1;
}
.home-hero .container {
position: relative;
z-index: 2;
}
.home-hero__content {color: #fff;max-width: 800px;}
.home-hero__content .section-eyebrow {color:#ddd;}
.home-hero__title {color: #dccdb7;font-size:3em;font-weight: 500;letter-spacing: 2.6px; margin-top: 0;}
.home-hero__intro {
line-height: 1.6;
margin-bottom: 60px;
opacity: .9;
} .home-hero__buttons {display: flex;gap: 28px;flex-wrap: wrap;} .blog-archive {background: #efefef;padding: 40px 0;}
.blog-grid {display: grid;grid-template-columns: 1fr;gap: 24px;}
.blog__grid_header {margin: 40px 0 60px;}
.blog__grid_title {margin-bottom: 18px;}
.blog-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
} .blog-card__image img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
} .blog-card__content {
padding: 16px;
} .blog-card__meta {
font-size: 13px;
color: #777;
margin-bottom: 8px;
} .blog-card__title {
font-size: 18px;
line-height: 1.4;
margin: 0 0 10px;
}
.blog-card__title a {
text-decoration: none;
color: #111;
}
.blog-card__title a:hover {
color: #444;
} .blog-card__tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.blog-card__tags a {
font-size: 14px;
padding: 4px 8px;
background: #efefef;
border-radius: 6px;
text-decoration: none;
color: #333;
transition: background 0.2s;
}
.blog-card__tags a:hover {
background: #e0e0e0;
} .post__entry {padding: 90px 0;}
.post__meta {
font-size: 13px;
color: #777;
margin-bottom: 10px;
}
.post__title {
font-size: 26px;
line-height: 1.3;
margin-bottom: 20px;
}
.post__image img {
width: 100%;
height: auto;
border-radius: 10px;
margin-bottom: 20px;
} .post__content {
}
.post__content h2 {margin-top: 28px;}
.post__content p {margin-bottom: 16px;} .post__tags {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 6px;
} .post-cta {
margin-top: 40px;
padding: 24px;
background: #f7f7f7;
border-radius: 12px;
text-align: center;
}
.post-cta h2 {
margin-bottom: 10px;
}
.post-cta p {
margin-bottom: 16px;
color: #555;
} .related-posts {margin-top: 50px;}
.related-posts h3 {margin-bottom: 20px;}
.tag-archive {padding: 30px 0;}
.tag-header {margin-bottom: 24px;}
.tag-title {font-size: 24px;margin-bottom: 10px;}
.tag-description {font-size: 15px;color: #555;line-height: 1.6;}
.tag-cta {
margin-top: 40px;
padding: 24px;
background: #f7f7f7;
border-radius: 12px;
text-align: center;
}
.tag-cta h2 {
margin-bottom: 10px;
}
.tag-cta p {margin-bottom: 16px;color: #555;}
.section-eyebrow {
font-size: 13px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--color-accent);
margin: 0 0 14px;
}
.section-title {
font-size: 1.8em;
font-weight: 500;
color: #1e202b;
line-height: 1.3;
margin: 0 0 16px;
}
.section-lead {
max-width: 600px;
opacity: .85;
margin: 0 0 52px;
} .industries-segments {
padding: var(--space-xxxl) 0;
background: #fff;
}
.industries-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: #e8e3db;
border: 1px solid #e8e3db;
}
.industry-card {
background: #fff;
padding: 36px 28px 32px;
display: flex;
flex-direction: column;
gap: 0;
transition: background .25s;
}
.industry-card:hover {
background: #f9f6f1;
}
.industry-card__icon {
width: 44px;
height: 44px;
margin-bottom: 20px;
flex-shrink: 0;
}
.industry-card__icon svg {
width: 44px;
height: 44px;
}
.industry-card__title {
font-size: 1.2em;
font-weight: 500;
color: #1e202b;
margin: 0 0 10px;
line-height: 1.2;
}
.industry-card__text {
font-size: .9em;
color: #777;
line-height: 1.6;
margin: 0 0 24px;
flex: 1;
}
.industry-card__link {
font-size: .85em;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--color-accent);
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.industry-card__arrow {
display: inline-block;
transition: transform .25s;
}
.industry-card:hover .industry-card__arrow {
transform: translateX(4px);
} .pain-points {
padding: var(--space-xxxl) 0;
background: #f4f1ec;
}
.pain-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
.pain-card {
background: #fff;
padding: 32px 28px;
border-left: 3px solid var(--color-accent);
display: flex;
flex-direction: column;
gap: 0;
}
.pain-card__icon {
width: 44px;
height: 44px;
margin-bottom: 18px;
flex-shrink: 0;
}
.pain-card__icon svg {
width: 44px;
height: 44px;
}
.pain-card__title {
font-size: 1.1em;
font-weight: 500;
color: #1e202b;
margin: 0 0 10px;
line-height: 1.3;
}
.pain-card__text {
font-size: .9em;
color: #777;
line-height: 1.6;
margin: 0;
} .how-it-works {
padding: var(--space-xxxl) 0;
background: #1e202b;
color: #fff;
}
.how-it-works .section-eyebrow {
color: var(--color-accent);
}
.how-it-works .section-title {
color: #fff;
}
.how-it-works .section-lead {
color: rgba(255,255,255,.7);
}
.hiw-steps {
display: flex;
flex-direction: column;
gap: 0;
align-items: flex-start;
}
.hiw-step__connector {
display: none;
}
.hiw-step {
padding: 40px 0;
border-bottom: 1px solid rgba(255,255,255,.08);
width: 100%;
}
.hiw-step:last-child {
border-bottom: none;
}
.hiw-step__number {
font-size: 3em;
font-weight: 500;
color: var(--color-accent);
opacity: .35;
line-height: 1;
margin-bottom: 16px;
letter-spacing: 2px;
}
.hiw-step__icon {
width: 44px;
height: 44px;
margin-bottom: 20px;
}
.hiw-step__icon svg {
width: 44px;
height: 44px;
}
.hiw-step__title {
font-size: 1.3em;
font-weight: 500;
color: #fff;
margin: 0 0 12px;
}
.hiw-step__text {
font-size: .9em;
color: rgba(255,255,255,.65);
line-height: 1.7;
margin: 0;
max-width: 480px;
}
.hiw-cta {
margin-top: 60px;
text-align: center;
}
.how-it-works .btn__light {
color: #fff;
border-color: rgba(255,255,255,.3);
}
.how-it-works .btn__light:hover {
background: var(--color-accent);
border-color: var(--color-accent);
color: #1e202b;
} .portfolio-section {
padding: var(--space-xxxl) 0;
background: #fff;
}
.portfolio-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: #e8e3db;
border: 1px solid #e8e3db;
margin-bottom: 48px;
}
.portfolio-card {
background: #fff;
display: flex;
flex-direction: column;
text-decoration: none;
overflow: hidden;
transition: background .25s;
}
.portfolio-card:hover {
background: #f9f6f1;
}
.portfolio-card__image {
overflow: hidden;
aspect-ratio: 16 / 10;
}
.portfolio-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .5s ease;
}
.portfolio-card:hover .portfolio-card__image img {
transform: scale(1.03);
}
.portfolio-card__placeholder {
width: 100%;
height: 100%;
background: #ede8e0;
}
.portfolio-card__content {
padding: 24px 28px 28px;
}
.portfolio-card__category {
font-size: .8em;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--color-accent);
margin: 0 0 8px;
}
.portfolio-card__title {
font-size: 1.15em;
font-weight: 500;
color: #1e202b;
margin: 0 0 16px;
line-height: 1.3;
}
.portfolio-card__link {
font-size: .85em;
letter-spacing: .06em;
text-transform: uppercase;
color: #1e202b;
opacity: .5;
transition: opacity .25s;
}
.portfolio-card:hover .portfolio-card__link {
opacity: 1;
}
.portfolio-cta {
text-align: center;
} @media (min-width: 768px) {
.industries-grid {
grid-template-columns: repeat(2, 1fr);
}
.pain-grid {
grid-template-columns: repeat(2, 1fr);
}
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.industries-grid {
grid-template-columns: repeat(3, 1fr);
}
.pain-grid {
grid-template-columns: repeat(3, 1fr);
}
.hiw-steps {
flex-direction: row;
align-items: flex-start;
gap: 0;
}
.hiw-step__connector {
display: flex;
align-items: center;
padding-top: 54px;
flex-shrink: 0;
width: 60px;
}
.hiw-step__connector svg {
width: 60px;
}
.hiw-step {
flex: 1;
padding: 0;
border-bottom: none;
padding-right: 8px;
}
.portfolio-grid {
grid-template-columns: repeat(3, 1fr);
}
} .pagination {margin: 80px 0;text-align:center}
.pagination__list {list-style: none;display: inline-flex;gap: 6px;padding-left: 10px;}
.page-numbers {padding: 5px 10px;}
.site-footer {background: #1e202b; color: #fff; padding: 84px 0;}
.footer__text {margin: 30px auto;text-align: center;opacity: .7;max-width: 600px;}
#menu-footer {padding-left: 0;list-style: none;}
#scrollTopBtn {
position: fixed;
bottom: 32px;
right: 32px;
width: 40px;
height: 40px;
border-radius: 8px;
background: #dccdb7;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.15s ease;
z-index: 9999;
}
#scrollTopBtn.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
#scrollTopBtn:hover {
background: #1e202b;
}
#scrollTopBtn:active {
transform: scale(0.93);
}
#scrollTopBtn:hover svg path {stroke:#fff} @media (min-width: 768px) {
.post__title {
font-size: 32px;
}
.post-cta {
padding: 32px;
}
.blog-grid {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.blog-card__image img {
height: 260px;
}
.tag-title {
font-size: 30px;
}
.tag-description {
font-size: 16px;
}
.tag-cta {
padding: 32px;
}
}
@media (min-width: 1024px) {
.home-hero {min-height: 70vh;}
.blog-grid {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.footer__menu {display: flex;
align-items: center;
justify-content: space-between;}
#menu-footer {display: inline-flex;gap: 10px;}
}
@media (min-width: 1440px) {
.container {width: 1400px;margin: auto;}
}