/* Fonts are loaded via + in each
page . An @import here would serialise the font request behind this
stylesheet and block first render. */
/* ==========================================================================
CSS CUSTOM PROPERTIES (DESIGN SYSTEM TOKENS)
========================================================================== */
:root {
/* Warm Premium Creative Agency Palette */
--bg-color: #F4EEE5; /* Warm base background */
--primary-color: #FF4B17; /* Orange Accent */
--secondary-color: #1A33FF; /* Blue Accent */
--card-bg: #FAF7F2; /* Very warm off-white inside cards */
--text-color: #1F1F1F; /* Primary Text */
--text-muted: #5F5F5F; /* Secondary Text */
--border-color: #DDD2C5; /* Warm Borders */
--focus-ring: #1A33FF;
/* Alternating Premium Section Backgrounds */
--bg-hero: #F4EEE5; /* Hero background */
--bg-floating: #E9DED0; /* Floating Cards section */
--bg-services: #EFE7DB; /* Services */
--bg-features: #E8EEF9; /* Why Choose Us */
--bg-process: #F3EADF; /* Process */
--bg-industries: #E6DFD3; /* Industries */
--bg-cta: #FFE5D8; /* CTA */
--bg-footer: #D9CEC0; /* Footer */
/* Button Hovers */
--primary-hover: #E63F0D;
--secondary-hover: #1427D4;
/* Accessible text variants.
The brand orange is 2.9:1 on the sand background and 2.2:1 on the footer,
both below the WCAG AA 4.5:1 floor for the small tagline text. These keep
the hue but clear AA on both (6.2:1 and 4.6:1). The vivid --primary-color
is still used for buttons, icons and large display text. */
--primary-text: #A52B09;
--text-muted-on-footer: #4D4D4D;
/* Primary button fill. White on the vivid brand orange is 3.35:1, under the
AA 4.5:1 floor for the 16px/600 button label. This darker orange is 4.7:1
and reads as the same brand colour. Scoped to the button fill so icons,
illustrations and accents keep --primary-color. */
--primary-button: #D6390C;
--primary-button-hover: #BD320A;
/* Fluid Typography Scale */
--font-size-h1: clamp(2.75rem, 5.5vw + 1rem, 4.75rem);
--font-size-h2: clamp(2.2rem, 3.8vw + 0.8rem, 3.25rem);
--font-size-h3: clamp(1.4rem, 2vw + 0.6rem, 2rem);
--font-size-body: clamp(1.1rem, 0.4vw + 0.85rem, 1.25rem);
--font-size-small: clamp(0.9rem, 0.1vw + 0.75rem, 1rem);
--font-size-nav: 1rem;
/* Fluid Spacing Scale */
--spacing-section: clamp(6.5rem, 10vw, 10.5rem);
--spacing-gap-lg: clamp(4rem, 6vw, 6.5rem);
--spacing-gap-md: clamp(2.5rem, 4.5vw, 4.5rem);
--spacing-gap-sm: clamp(1.5rem, 2.5vw, 2.5rem);
/* Layout Constants */
--max-width: 1200px;
--border-radius-lg: 32px;
--border-radius-md: 20px;
--border-radius-sm: 12px;
/* Luxury Soft Shadows */
--shadow-subtle: 0 15px 40px rgba(31, 31, 31, 0.015);
--shadow-card: 0 20px 50px rgba(31, 31, 31, 0.025);
--shadow-hover: 0 35px 70px rgba(31, 31, 31, 0.05);
--shadow-input: inset 0 2px 4px rgba(31, 31, 31, 0.02), 0 2px 8px rgba(31, 31, 31, 0.01);
--transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* ==========================================================================
RESET & ACCESSIBILITY
========================================================================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 100px;
}
/* Metric-matched fallback.
The webfont loads asynchronously, so text first paints in the fallback and
then reflows when Plus Jakarta Sans arrives — that swap was the single
largest layout shift on the page (0.088 of CLS, almost all of it the hero
h1). These overrides were measured against the real font at weight 700:
ascent 104%, descent 22%, and Arial needs 101.1% width to match. Matching
them makes the swap visually near-invisible and geometrically free. */
@font-face {
font-family: 'Jakarta Fallback';
src: local('Arial'), local('Helvetica'), local('Liberation Sans');
size-adjust: 101.1%;
ascent-override: 104%;
descent-override: 22%;
line-gap-override: 0%;
}
body {
font-family: 'Plus Jakarta Sans', 'Jakarta Fallback', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Accessibility skip link */
.skip-link {
position: absolute;
top: -100px;
left: 20px;
background-color: var(--secondary-color);
color: #FFFFFF;
padding: 14px 28px;
z-index: 1001;
border-radius: var(--border-radius-sm);
text-decoration: none;
font-weight: 600;
transition: top 0.2s ease;
}
.skip-link:focus {
top: 20px;
}
*:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 4px;
}
a {
color: inherit;
text-decoration: none;
transition: var(--transition-smooth);
}
button, input, textarea, select {
font-family: inherit;
font-size: inherit;
color: inherit;
border: none;
background: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* ==========================================================================
REUSABLE LAYOUT & MODULES
========================================================================== */
.container {
width: 90%;
max-width: var(--max-width);
margin: 0 auto;
}
/* Large and Well Spaced Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 18px 36px;
font-size: 1rem;
font-weight: 600;
border-radius: 50px;
cursor: pointer;
white-space: nowrap;
transition: var(--transition-smooth);
}
.btn--primary {
background-color: var(--primary-button);
color: #FFFFFF;
}
.btn--primary:hover {
background-color: var(--primary-button-hover);
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(255, 75, 23, 0.25);
}
.btn--secondary {
background-color: var(--secondary-color);
color: #FFFFFF;
}
.btn--secondary:hover {
background-color: var(--secondary-hover);
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(26, 51, 255, 0.25);
}
.btn--outline {
background-color: transparent;
color: var(--text-color);
border: 1.5px solid var(--border-color);
}
.btn--outline:hover {
background-color: rgba(31, 31, 31, 0.03);
border-color: var(--text-color);
transform: translateY(-3px);
}
/* Tags */
.section-tag {
display: inline-block;
font-size: 0.9rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2.5px;
color: var(--secondary-color);
margin-bottom: 20px;
}
/* Section Header */
.section-header {
text-align: center;
max-width: 780px;
margin: 0 auto var(--spacing-gap-lg) auto;
}
.section-header h2 {
font-size: var(--font-size-h2);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.5px;
margin-bottom: 24px;
}
.section-header p {
font-size: var(--font-size-body);
color: var(--text-muted);
}
/* Card Structures */
.card {
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
padding: clamp(32px, 6vw, 56px);
box-shadow: var(--shadow-card);
transition: var(--transition-smooth);
}
.card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-hover);
border-color: transparent;
}
/* Grid System */
.grid {
display: grid;
gap: var(--spacing-gap-md);
}
.grid--2-col {
grid-template-columns: 1fr;
}
.grid--3-col {
grid-template-columns: 1fr;
}
.grid--4-col {
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.grid--2-col { grid-template-columns: repeat(2, 1fr); }
.grid--3-col { grid-template-columns: repeat(2, 1fr); }
.grid--4-col { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.grid--3-col { grid-template-columns: repeat(3, 1fr); }
.grid--4-col { grid-template-columns: repeat(4, 1fr); }
}
/* ==========================================================================
STICKY HEADER & NAV
========================================================================== */
.header {
position: sticky;
top: 0;
z-index: 1000;
background-color: rgba(244, 238, 229, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-color);
transition: var(--transition-smooth);
}
.header--scrolled {
background-color: rgba(244, 238, 229, 0.95);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.015);
}
.header__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 80px; /* Mobile header height */
padding: 0 20px;
}
@media (min-width: 768px) {
.header__container {
height: 90px; /* Tablet header height */
padding: 0 32px;
}
}
@media (min-width: 1024px) {
.header__container {
height: 96px; /* Desktop header height */
padding: 0 48px; /* Increased spacing from left edge */
}
}
.logo {
display: flex;
align-items: center;
gap: 12px;
margin-right: 48px;
text-decoration: none;
}
.logo-img {
height: 44px; /* Mobile */
width: auto;
max-height: 100%;
display: block;
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
flex-shrink: 0;
}
.logo-text {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.logo-title {
font-size: 20px; /* Mobile */
font-weight: 800;
color: var(--text-color);
line-height: 1.1;
letter-spacing: -0.5px;
}
.logo-tagline {
font-size: 11px; /* Mobile */
font-weight: 600;
color: var(--primary-text);
line-height: 1.2;
white-space: nowrap;
}
@media (min-width: 768px) {
.logo {
gap: 14px;
margin-right: 56px;
}
.logo-img {
height: 52px; /* Tablet */
}
.logo-title {
font-size: 26px; /* Tablet */
}
.logo-tagline {
font-size: 13px; /* Tablet */
}
}
@media (min-width: 1024px) {
.logo {
gap: 16px;
margin-right: 64px; /* Spacing between logo and navigation */
}
.logo-img {
height: 60px; /* Desktop: 60px */
}
.logo-title {
font-size: 32px; /* Desktop: 30-34px */
}
.logo-tagline {
font-size: 16px; /* Desktop: 16px */
}
}
@media (max-width: 480px) {
.logo {
gap: 8px;
}
.logo-title {
font-size: 18px;
}
.logo-tagline {
font-size: 10px;
}
}
.nav {
display: none;
}
.nav__list {
display: flex;
align-items: center;
gap: 48px;
list-style: none;
}
.nav__link {
font-size: var(--font-size-nav);
font-weight: 600;
color: var(--text-muted);
position: relative;
padding: 8px 0;
}
.nav__link:hover,
.nav__link--active {
color: var(--text-color);
}
.nav__link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary-color);
transition: var(--transition-smooth);
}
.nav__link:hover::after,
.nav__link--active::after {
width: 100%;
}
.header__cta {
display: none;
}
/* Mobile Hamburger Menu */
.burger-btn {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 28px;
height: 18px;
background: transparent;
cursor: pointer;
z-index: 1002;
}
.burger-btn span {
display: block;
width: 100%;
height: 2px;
background-color: var(--text-color);
border-radius: 2px;
transition: var(--transition-smooth);
}
.burger-btn--open span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.burger-btn--open span:nth-child(2) {
opacity: 0;
}
.burger-btn--open span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* Mobile Drawer Menu */
.mobile-nav {
position: fixed;
top: 0;
right: -100%;
width: 100%;
max-width: 320px;
height: 100vh;
background-color: var(--card-bg);
box-shadow: -15px 0 45px rgba(0, 0, 0, 0.05);
z-index: 1001;
display: flex;
flex-direction: column;
padding: 120px 40px 40px 40px;
transition: var(--transition-smooth);
}
.mobile-nav--open {
right: 0;
}
.mobile-nav__list {
display: flex;
flex-direction: column;
gap: 28px;
list-style: none;
margin-bottom: 48px;
}
.mobile-nav__link {
font-size: 1.35rem;
font-weight: 700;
color: var(--text-color);
}
.mobile-nav__link:hover,
.mobile-nav__link--active {
color: var(--primary-color);
}
.mobile-nav__cta {
width: 100%;
}
.nav-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(30, 30, 28, 0.3);
backdrop-filter: blur(8px);
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: var(--transition-smooth);
}
.nav-overlay--active {
opacity: 1;
pointer-events: auto;
}
@media (min-width: 992px) {
.nav {
display: block;
}
.header__cta {
display: inline-flex;
}
.burger-btn,
.mobile-nav,
.nav-overlay {
display: none !important;
}
}
/* ==========================================================================
SECTION 1: HERO
========================================================================== */
.hero {
position: relative;
padding-top: clamp(2rem, 5vw, 4rem);
padding-bottom: clamp(10rem, 15vw, 15rem);
background-color: var(--bg-hero);
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('hero-bg.webp');
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
opacity: 0.3; /* 30% opacity as requested */
pointer-events: none;
z-index: 1;
}
.hero__grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-gap-lg);
align-items: center;
}
.hero__content {
text-align: center;
}
.hero__title {
font-size: var(--font-size-h1);
font-weight: 800;
line-height: 1.08;
letter-spacing: -1.8px;
color: var(--text-color);
margin-bottom: 28px;
}
.hero__title span {
color: var(--primary-color);
}
.hero__description {
font-size: var(--font-size-body);
color: var(--text-muted);
max-width: 650px;
margin: 0 auto 56px auto;
}
.hero__ctas {
display: flex;
flex-direction: column;
gap: 24px;
justify-content: center;
}
.hero__image {
width: 100%;
max-width: 630px;
height: auto;
border-radius: var(--border-radius-lg);
border: 1px solid var(--border-color);
box-shadow: var(--shadow-hover);
}
.hero__illustration {
display: flex;
justify-content: center;
align-items: center;
}
@media (min-width: 768px) {
.hero__ctas {
flex-direction: row;
}
}
@media (min-width: 992px) {
.hero__grid {
grid-template-columns: 1.15fr 0.85fr;
text-align: left;
}
.hero__content {
text-align: left;
transform: translateY(-50px); /* Move left content block upward by ~50px */
}
.hero__illustration {
transform: translateY(-20px); /* Align illustration nicely */
}
.hero__description {
margin-left: 0;
}
.hero__ctas {
justify-content: flex-start;
}
}
/* ==========================================================================
SECTION 2: FLOATING OVERLAPPING CARDS
========================================================================== */
.floating-section {
position: relative;
margin-top: clamp(-8rem, -12vw, -12rem);
z-index: 10;
padding-bottom: var(--spacing-section);
background-color: transparent;
}
.floating-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-gap-md);
}
.floating-card {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 100%;
background-color: var(--card-bg);
}
.floating-card__icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: var(--border-radius-md);
margin-bottom: 32px;
}
.floating-card__icon-wrapper--seo { background-color: rgba(26, 51, 255, 0.05); color: var(--secondary-color); }
.floating-card__icon-wrapper--ads { background-color: rgba(255, 75, 23, 0.05); color: var(--primary-color); }
.floating-card__icon-wrapper--web { background-color: rgba(31, 31, 31, 0.03); color: var(--text-color); }
.floating-card__title {
font-size: var(--font-size-h3);
font-weight: 700;
margin-bottom: 16px;
letter-spacing: -0.2px;
}
.floating-card__desc {
font-size: var(--font-size-body);
color: var(--text-muted);
margin-bottom: 32px;
flex-grow: 1;
}
.floating-card__link {
font-weight: 700;
font-size: 0.95rem;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--secondary-color);
}
.floating-card__link:hover {
gap: 14px;
color: var(--primary-color);
}
@media (min-width: 768px) {
.floating-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.floating-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ==========================================================================
SECTION 3: SERVICES GRID (Soft Beige Background)
========================================================================== */
.services-section {
padding: var(--spacing-section) 0;
background-color: var(--bg-services);
}
.services-grid {
grid-template-columns: 1fr;
}
.service-card {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 100%;
background-color: var(--card-bg);
}
.service-card__illus {
width: 100%;
height: 180px;
border-radius: var(--border-radius-md);
background-color: var(--bg-hero);
margin-bottom: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-color);
overflow: hidden;
}
.service-card__illus svg {
width: 90px;
height: 90px;
}
.service-card__title {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 16px;
}
.service-card__desc {
font-size: var(--font-size-body);
color: var(--text-muted);
margin-bottom: 32px;
flex-grow: 1;
}
.service-card__btn {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-color);
border-bottom: 2px solid var(--text-color);
padding-bottom: 4px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.service-card__btn:hover {
color: var(--primary-color);
border-color: var(--primary-color);
}
@media (min-width: 768px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.services-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ==========================================================================
SECTION 4: WHY CHOOSE US
========================================================================== */
.why-section {
padding: var(--spacing-section) 0;
background-color: var(--bg-features);
}
.why-grid {
display: grid;
gap: var(--spacing-gap-md);
grid-template-columns: 1fr;
}
.why-card {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 100%;
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
padding: clamp(32px, 6vw, 56px);
box-shadow: var(--shadow-card);
transition: var(--transition-smooth);
}
.why-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-hover);
border-color: transparent;
}
.why-card__icon {
width: 64px;
height: 64px;
color: var(--secondary-color);
margin-bottom: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.why-card__icon svg {
width: 64px;
height: 64px;
}
.why-card__title {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 14px;
color: var(--text-color);
}
.why-card__desc {
font-size: 1rem;
color: var(--text-muted);
line-height: 1.7;
}
@media (min-width: 768px) {
.why-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.why-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ==========================================================================
SECTION 5: PROCESS
========================================================================== */
.process-section {
padding: var(--spacing-section) 0;
background-color: var(--bg-process);
}
.process-timeline {
display: flex;
flex-direction: column;
gap: var(--spacing-gap-md);
position: relative;
padding: 20px 0;
}
@media (min-width: 1024px) {
.process-timeline {
flex-direction: row;
justify-content: space-between;
}
.process-timeline::before {
content: '';
position: absolute;
top: 70px;
left: 8%;
width: 84%;
height: 2px;
background-color: var(--border-color);
z-index: 1;
}
}
.process-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
z-index: 2;
flex: 1;
}
.process-step__number {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: var(--card-bg);
border: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
font-weight: 800;
color: var(--primary-color);
margin-bottom: 32px;
box-shadow: var(--shadow-card);
transition: var(--transition-smooth);
}
.process-step:hover .process-step__number {
background-color: var(--primary-color);
color: #FFFFFF;
border-color: var(--primary-color);
transform: scale(1.08);
}
.process-step__title {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 16px;
}
.process-step__desc {
font-size: 0.95rem;
color: var(--text-muted);
max-width: 260px;
}
/* ==========================================================================
SECTION 6: INDUSTRIES (Redesigned Grid Layout)
========================================================================== */
.industries-section {
padding: var(--spacing-section) 0;
background-color: var(--bg-industries);
}
/* 3 columns x 2 rows on desktop, 2 columns x 3 rows on tablet, 1 column on mobile */
.industries-grid {
display: grid;
gap: var(--spacing-gap-md); /* Increased spacing between cards */
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.industries-grid {
grid-template-columns: repeat(2, 1fr); /* 2 columns x 3 rows */
}
}
@media (min-width: 1024px) {
.industries-grid {
grid-template-columns: repeat(3, 1fr); /* 3 columns x 2 rows */
}
}
/* Resembles premium card layouts with center-aligned content, lifts 6px on hover */
.industry-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
padding: clamp(36px, 5vw, 48px); /* Increased internal padding */
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-card);
transition: var(--transition-smooth);
height: 100%;
}
.industry-card:hover {
transform: translateY(-6px); /* Lift card by 6px on hover */
box-shadow: var(--shadow-hover);
border-color: var(--secondary-color);
}
/* Icon wrapper size increased by 20% (from 56px to 68px) */
.industry-card__icon {
width: 68px;
height: 68px;
background-color: var(--bg-process);
border: 1px solid var(--border-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary-color);
margin-bottom: 24px;
flex-shrink: 0;
}
/* Icon SVG size increased by 20% (from 26px to 32px) */
.industry-card__icon svg {
width: 32px;
height: 32px;
}
/* Title size increased slightly */
.industry-card__title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-color);
}
/* ==========================================================================
SECTION 7: FINAL CTA
========================================================================== */
.cta-section {
padding: var(--spacing-section) 0;
background-color: var(--bg-cta);
}
.cta-box {
background-color: var(--secondary-color);
color: #FFFFFF;
border-radius: var(--border-radius-lg);
padding: clamp(60px, 10vw, 100px) clamp(40px, 8vw, 80px);
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 30px 60px rgba(26, 51, 255, 0.12);
}
.cta-box::after {
content: '';
position: absolute;
width: 360px;
height: 360px;
background-color: rgba(255, 75, 23, 0.1);
border-radius: 50%;
bottom: -180px;
right: -80px;
z-index: 1;
}
.cta-box::before {
content: '';
position: absolute;
width: 240px;
height: 240px;
background-color: rgba(255, 255, 255, 0.04);
border-radius: 50%;
top: -120px;
left: -80px;
z-index: 1;
}
.cta-box > * {
position: relative;
z-index: 2;
}
.cta-box h2 {
font-size: var(--font-size-h2);
font-weight: 800;
line-height: 1.2;
margin-bottom: 24px;
letter-spacing: -0.5px;
}
.cta-box p {
font-size: var(--font-size-body);
max-width: 620px;
margin: 0 auto 48px auto;
opacity: 0.9;
}
/* ==========================================================================
FOOTER (Compact Footer Redesign)
========================================================================== */
.footer {
background-color: var(--bg-footer);
border-top: 1px solid var(--border-color);
padding: clamp(40px, 6vw, 60px) 0 30px 0;
color: var(--text-color);
/* The footer background is darker than the page, so the site-wide muted grey
lands at 4.1:1 here. Rebind the token for everything inside the footer
rather than patching each rule. */
--text-muted: var(--text-muted-on-footer);
}
.footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-gap-md);
margin-bottom: 40px;
}
@media (min-width: 1024px) {
.footer__grid {
grid-template-columns: 2.2fr 1fr 1fr 2.4fr;
column-gap: clamp(40px, 5vw, 80px);
}
}
.footer__brand {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.footer__logo-group {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px; /* Spacing below logo group on mobile */
}
.footer__logo-text {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.footer-logo {
height: 48px; /* Mobile */
max-height: 48px;
width: auto;
display: block;
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
flex-shrink: 0;
}
.footer__brand-title {
font-size: 20px; /* Mobile */
font-weight: 800;
color: var(--text-color);
line-height: 1.1;
letter-spacing: -0.5px;
}
.footer__brand-tagline {
font-size: 11px; /* Mobile */
font-weight: 700;
color: var(--primary-text);
line-height: 1.2;
}
@media (min-width: 768px) {
.footer__logo-group {
gap: 14px;
margin-bottom: 24px;
}
.footer-logo {
height: 56px; /* Tablet */
max-height: 56px;
}
.footer__brand-title {
font-size: 26px; /* Tablet */
}
.footer__brand-tagline {
font-size: 13px; /* Tablet */
}
}
@media (min-width: 1024px) {
.footer__logo-group {
gap: 16px;
margin-bottom: 28px; /* Spacing below logo group on desktop */
}
.footer-logo {
height: 68px; /* Desktop: 64px–72px range */
max-height: 68px;
}
.footer__brand-title {
font-size: 32px; /* Desktop */
}
.footer__brand-tagline {
font-size: 16px; /* Desktop */
}
}
.footer__brand-desc {
font-size: 0.95rem;
color: var(--text-muted-on-footer);
max-width: 320px;
margin-bottom: 20px;
line-height: 1.6;
}
.footer__office-primary {
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-color);
margin-top: 0;
}
.footer__heading {
font-size: 0.95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 24px;
color: var(--text-color);
border-bottom: 2px solid var(--border-color);
padding-bottom: 8px;
display: inline-block;
}
.footer__links {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.footer__link {
font-size: 0.95rem;
color: var(--text-muted-on-footer);
font-weight: 500;
}
.footer__link:hover {
color: var(--secondary-color);
}
.footer__contact-info {
list-style: none;
display: flex;
flex-direction: column;
gap: 16px;
}
.footer__contact-item {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.95rem;
color: var(--text-muted);
}
.footer__contact-item strong {
color: var(--text-color);
display: block;
margin-bottom: 2px;
}
.footer__contact-item a:hover {
color: var(--secondary-color);
}
.footer__contact-icon {
color: var(--secondary-color);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 4px;
}
/* Primary prominent office block */
.footer__office-primary {
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-color);
margin-top: 14px;
}
.footer__office-primary strong {
color: var(--text-color);
}
/* Footer Bottom Layout */
.footer__bottom {
border-top: 1px solid var(--border-color);
padding-top: 24px;
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
justify-content: space-between;
}
.footer__copyright {
font-size: 0.85rem;
color: var(--text-muted);
text-align: center;
}
/* Smaller Legal Note for Registered Address */
.footer__registered-legal {
font-size: 0.82rem;
color: var(--text-muted);
text-align: center;
max-width: 500px;
line-height: 1.5;
/* No opacity here: it blended the text toward the footer background and
dropped the effective contrast to 4.0:1, under the AA floor. */
}
@media (min-width: 768px) {
.footer__bottom {
flex-direction: row;
text-align: left;
}
.footer__registered-legal {
text-align: right;
}
}
/* ==========================================================================
ABOUT PAGE EXTRAS
========================================================================== */
/* Honeypot: removed from layout and from the accessibility tree, never focusable.
Deliberately not display:none, which some bots detect and skip. */
.hp-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.subpage-hero {
padding: clamp(5rem, 8vw, 9rem) 0 clamp(4rem, 7vw, 8rem) 0;
background-color: var(--bg-hero);
text-align: center;
}
.subpage-hero h1 {
font-size: var(--font-size-h1);
font-weight: 800;
line-height: 1.1;
margin-bottom: 28px;
letter-spacing: -1.8px;
}
.subpage-hero p {
font-size: var(--font-size-body);
color: var(--text-muted);
max-width: 700px;
margin: 0 auto;
}
.about-intro {
padding: var(--spacing-section) 0;
background-color: var(--bg-features);
}
.about-intro__text h2 {
font-size: var(--font-size-h2);
font-weight: 800;
line-height: 1.2;
margin-bottom: 32px;
letter-spacing: -0.5px;
}
.about-intro__text p {
font-size: var(--font-size-body);
color: var(--text-muted);
margin-bottom: 28px;
}
.values-section {
padding: var(--spacing-section) 0;
background-color: var(--bg-services);
}
/* ==========================================================================
CONTACT PAGE EXTRAS
========================================================================== */
.contact-section {
padding: var(--spacing-section) 0;
background-color: var(--bg-services);
}
.contact-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-gap-lg);
}
.contact-info-block {
display: flex;
flex-direction: column;
gap: 40px;
}
.contact-card {
display: flex;
align-items: flex-start;
gap: 28px;
padding: 36px;
background-color: var(--card-bg);
border-radius: var(--border-radius-md);
border: 1px solid var(--border-color);
box-shadow: var(--shadow-card);
transition: var(--transition-smooth);
height: 100%;
}
.contact-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-hover);
border-color: var(--secondary-color);
}
.contact-card__icon {
width: 69px;
height: 69px;
background-color: var(--bg-process);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary-color);
flex-shrink: 0;
}
.contact-card__icon svg {
width: 28px;
height: 28px;
}
.contact-card__title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 10px;
}
.contact-card__detail {
font-size: 0.95rem;
color: var(--text-muted);
}
.contact-card__detail a:hover {
color: var(--secondary-color);
}
.map-container {
width: 100%;
height: 380px;
/* The parent is a column flex container, so height is the main axis and the
default flex-shrink collapsed this to ~88px. Hold the declared height. */
flex-shrink: 0;
border-radius: var(--border-radius-md);
overflow: hidden;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-card);
position: relative;
background-color: var(--bg-process);
}
.map-container iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.form-group {
margin-bottom: 36px;
}
.form-label {
display: block;
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 12px;
}
.form-label span {
color: var(--primary-color);
}
.form-control {
width: 100%;
padding: 20px 24px;
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
font-size: 0.95rem;
color: var(--text-color);
box-shadow: var(--shadow-input);
transition: var(--transition-smooth);
}
.form-control:focus {
outline: none;
border-color: var(--secondary-color);
background-color: #FFFFFF;
box-shadow: 0 0 0 4px rgba(26, 51, 255, 0.15);
}
textarea.form-control {
resize: vertical;
min-height: 160px;
}
.form-alert {
padding: 20px 28px;
border-radius: var(--border-radius-sm);
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 32px;
display: none;
}
.form-alert--success {
background-color: rgba(46, 204, 113, 0.08);
color: #27ae60;
border: 1px solid rgba(46, 204, 113, 0.15);
}
.form-alert--error {
background-color: rgba(231, 76, 60, 0.08);
color: #c0392b;
border: 1px solid rgba(231, 76, 60, 0.15);
}
@media (min-width: 992px) {
.contact-layout {
grid-template-columns: 1fr 1.25fr;
gap: var(--spacing-gap-lg);
}
.map-container {
height: 480px;
}
}
/* ==========================================================================
LEGAL PAGES
========================================================================== */
.legal-content {
padding: var(--spacing-section) 0;
background-color: var(--bg-services);
}
.legal-text {
max-width: 800px;
margin: 0 auto;
}
.legal-text h2 {
font-size: 1.65rem;
font-weight: 700;
margin: 56px 0 24px 0;
color: var(--text-color);
}
.legal-text p {
color: var(--text-muted);
margin-bottom: 28px;
font-size: var(--font-size-body);
}
.legal-text ul {
color: var(--text-muted);
margin-bottom: 32px;
padding-left: 32px;
}
.legal-text li {
margin-bottom: 12px;
}