:root {
--font-display: 'Barlow Condensed', 'Inter', sans-serif;
--marker: #E03E2D; } .hero__headline,
.section__title,
.case-study__title,
.cta-banner h2,
.cta-banner__title {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.01em;
font-weight: 700;
line-height: 0.95;
}
.section__title { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.case-study__title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); } .section__eyebrow {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 600;
}
.section__eyebrow::before {
content: '';
display: inline-block;
width: 0.85em; height: 0.85em;
margin-right: 0.55em;
vertical-align: -0.08em;
background:
linear-gradient(var(--marker), var(--marker)) center/100% 2px no-repeat,
linear-gradient(var(--marker), var(--marker)) center/2px 100% no-repeat;
} .hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
overflow: hidden;
}
.hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 32%;
transform: scale(1.07);
transition: transform 14s ease-out;
}
.hero-loaded .hero__bg img { transform: scale(1.0); }
.hero__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(78deg,
rgba(7, 16, 30, 0.94) 0%,
rgba(9, 21, 39, 0.82) 34%,
rgba(11, 25, 46, 0.45) 62%,
rgba(11, 25, 46, 0.18) 100%),
linear-gradient(to top, rgba(7, 16, 30, 0.85) 0%, transparent 28%);
}
.hero__content { position: relative; z-index: 1; } .hero__claim {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-display);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.95rem;
color: var(--white-80);
margin-bottom: 1.4rem;
}
.hero__claim-axis {
width: 15px; height: 15px;
position: relative;
flex: none;
}
.hero__claim-axis::before,
.hero__claim-axis::after {
content: '';
position: absolute;
background: var(--marker);
}
.hero__claim-axis::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.hero__claim-axis::after  { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }
.hero__headline {
font-size: clamp(3rem, 7.2vw, 6.2rem);
margin: 0 0 1.4rem;
}
.hero__headline .hl-line {
display: block;
overflow: hidden;
}
.hero__headline .hl-line > span {
display: block;
transform: translateY(110%);
transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-loaded .hero__headline .hl-line:nth-child(1) > span { transform: translateY(0); transition-delay: 0.15s; }
.hero-loaded .hero__headline .hl-line:nth-child(2) > span { transform: translateY(0); transition-delay: 0.30s; }
.hero__subline {
max-width: 34rem;
opacity: 0;
transform: translateY(14px);
transition: opacity 0.7s ease 0.55s, transform 0.7s ease 0.55s;
}
.hero-loaded .hero__subline { opacity: 1; transform: none; }
.hero__ctas {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.7s ease 0.75s, transform 0.7s ease 0.75s;
}
.hero-loaded .hero__ctas { opacity: 1; transform: none; }
.hero__stats {
opacity: 0;
transition: opacity 0.8s ease 1s;
}
.hero-loaded .hero__stats { opacity: 1; } .btn--call {
position: relative;
white-space: nowrap;
}
.btn--call svg { margin-right: 0.5rem; vertical-align: -0.18em; }
.btn--call::after {
content: '';
position: absolute;
inset: -3px;
border-radius: inherit;
border: 2px solid rgba(201, 168, 76, 0.6);
animation: call-ring 2.4s ease-out infinite;
pointer-events: none;
}
@keyframes call-ring {
0%   { opacity: 0.9; transform: scale(1); }
70%  { opacity: 0;   transform: scale(1.12); }
100% { opacity: 0;   transform: scale(1.12); }
} .btn--gold { position: relative; overflow: hidden; }
.btn--gold::before {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 45%;
left: -60%;
background: linear-gradient(105deg, transparent, rgba(255,255,255,0.45), transparent);
transform: skewX(-20deg);
transition: left 0.6s ease;
}
.btn--gold:hover::before { left: 120%; } .hero__scroll-cue {
position: absolute;
left: 50%;
bottom: 2rem;
transform: translateX(-50%);
width: 2px; height: 52px;
background: rgba(255,255,255,0.18);
overflow: hidden;
z-index: 1;
}
.hero__scroll-cue::after {
content: '';
position: absolute;
left: 0; top: -40%;
width: 100%; height: 40%;
background: var(--gold);
animation: cue-drop 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes cue-drop {
0%   { top: -40%; }
100% { top: 110%; }
} .trust-marquee {
background: var(--navy);
border-top: 1px solid rgba(201, 168, 76, 0.25);
border-bottom: 1px solid rgba(201, 168, 76, 0.25);
overflow: hidden;
padding: 0.85rem 0;
position: relative;
z-index: 2;
}
.trust-marquee__track {
display: flex;
width: max-content;
animation: marquee-scroll 36s linear infinite;
}
.trust-marquee:hover .trust-marquee__track { animation-play-state: paused; }
.trust-marquee__group {
display: flex;
align-items: center;
flex: none;
}
.trust-marquee__item {
font-family: var(--font-display);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.95rem;
color: var(--gold);
white-space: nowrap;
padding: 0 1.6rem;
}
.trust-marquee__dot {
width: 6px; height: 6px;
background: rgba(201, 168, 76, 0.5);
transform: rotate(45deg);
flex: none;
}
@keyframes marquee-scroll {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
} .service-card,
.portfolio__card,
.blog-preview__card,
.testimonial-card {
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.35s ease;
}
.service-card:hover,
.portfolio__card:hover,
.blog-preview__card:hover,
.testimonial-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.portfolio__card { overflow: hidden; }
.portfolio__card img,
.blog-preview__card img,
.case-study__image {
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.portfolio__card:hover img,
.blog-preview__card:hover img { transform: scale(1.05); }
.case-study__image { border-radius: var(--radius-lg); }
.case-study:hover .case-study__image { transform: scale(1.02); } .anim-on-scroll { transition-delay: 0s; }
.service-card.anim-on-scroll:nth-child(2),
.portfolio__card.anim-on-scroll:nth-child(2),
.blog-preview__card.anim-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.service-card.anim-on-scroll:nth-child(3),
.portfolio__card.anim-on-scroll:nth-child(3),
.blog-preview__card.anim-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.service-card.anim-on-scroll:nth-child(4),
.portfolio__card.anim-on-scroll:nth-child(4) { transition-delay: 0.3s; } @media (max-width: 768px) {
.hero { min-height: 92svh; }
.hero__bg img { object-position: center 20%; }
.hero__headline { font-size: clamp(2.6rem, 13vw, 3.6rem); }
.hero__claim { font-size: 0.8rem; letter-spacing: 0.16em; }
.hero__ctas { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; }
.btn--call { text-align: center; }
.trust-marquee__item { font-size: 0.82rem; padding: 0 1.1rem; }
.hero__scroll-cue { display: none; } .hero__headline .hl-line > span { transform: none; transition: none; }
.hero__subline, .hero__ctas, .hero__stats { opacity: 1; transform: none; transition: none; }
} @media (prefers-reduced-motion: reduce) {
.hero__bg img { transform: none; transition: none; }
.hero__headline .hl-line > span { transform: none; transition: none; }
.hero__subline, .hero__ctas, .hero__stats { opacity: 1; transform: none; transition: none; }
.btn--call::after { animation: none; }
.hero__scroll-cue { display: none; }
.trust-marquee__track { animation: none; flex-wrap: wrap; width: auto; }
.btn--gold::before { display: none; }
}  .hero__overlay {
background:
radial-gradient(120% 90% at 78% 30%, transparent 0%, rgba(7,16,30,0.35) 55%, rgba(7,16,30,0.8) 100%),
linear-gradient(78deg,
rgba(7, 16, 30, 0.95) 0%,
rgba(9, 21, 39, 0.84) 32%,
rgba(11, 25, 46, 0.42) 64%,
rgba(11, 25, 46, 0.22) 100%),
linear-gradient(to top, rgba(7, 16, 30, 0.92) 0%, transparent 30%);
} .hero__grain {
position: absolute; inset: 0; z-index: 1;
pointer-events: none;
opacity: 0.55;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
} .hero__dust {
position: absolute; inset: 0; z-index: 1;
pointer-events: none;
} .hero__headline--gold > span {
background: linear-gradient(100deg, #a8863b 0%, #c9a84c 30%, #f3e2a0 50%, #c9a84c 70%, #a8863b 100%);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: gold-shine 5.5s ease-in-out 1.4s infinite;
}
@keyframes gold-shine {
0%, 100% { background-position: 0% 0; }
50%      { background-position: 100% 0; }
} .scroll-progress {
position: fixed;
top: 0; left: 0;
height: 3px; width: 0;
background: linear-gradient(90deg, #a8863b, #c9a84c 60%, #f3e2a0);
z-index: 99999;
transition: width 80ms linear;
} .site-header { transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; }
.site-header.scrolled {
background: rgba(9, 20, 38, 0.82);
-webkit-backdrop-filter: blur(16px) saturate(1.3);
backdrop-filter: blur(16px) saturate(1.3);
border-bottom: 1px solid rgba(201, 168, 76, 0.22);
box-shadow: 0 8px 32px rgba(7, 16, 30, 0.45);
} .section { position: relative; overflow-x: clip; }
.ghost-word {
position: absolute;
top: 0.5rem;
right: -1rem;
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
font-size: clamp(6rem, 16vw, 15rem);
line-height: 1;
letter-spacing: 0.02em;
color: transparent;
-webkit-text-stroke: 1.5px rgba(11, 25, 46, 0.07);
pointer-events: none;
user-select: none;
white-space: nowrap;
z-index: 0;
will-change: transform;
}
.section--navy .ghost-word { -webkit-text-stroke-color: rgba(255, 255, 255, 0.05); }
.section--white .ghost-word { -webkit-text-stroke-color: rgba(11, 25, 46, 0.055); }
.section > .container { position: relative; z-index: 1; } .service-card { position: relative; }
.service-card::after {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
padding: 1.5px;
background: linear-gradient(135deg, rgba(201,168,76,0), rgba(201,168,76,0.75), rgba(243,226,160,0.9), rgba(201,168,76,0));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.service-card:hover::after { opacity: 1; } .case-study__visual {
clip-path: inset(7% 10% 7% 10% round 24px);
transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.case-study.revealed .case-study__visual,
.case-study__visual.revealed {
clip-path: inset(0 0 0 0 round 20px);
} .hero__bg { will-change: transform; }
@media (max-width: 768px) {
.ghost-word { display: none; }
.hero__grain { opacity: 0.4; }
}
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
.hero__headline--gold > span { animation: none; }
.scroll-progress { display: none; }
.case-study__visual { clip-path: none; transition: none; }
.ghost-word { display: none; }
.hero__dust { display: none; }
}