:root {
--header-height-initial: 140px;
--header-height-compact: 110px;
--text-color-light: #1f1f1f;
--text-color-dark: #1f1f1f;
--header-compact-bg: #ffffff;
--feature-pad-y: clamp(96px, 12vh, 168px);
--feature-gap: clamp(80px, 10vh, 140px);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
scroll-behavior: smooth;
}
body {
/* UPDATED: New font family for body text */
font-family: 'Inter', sans-serif;
background-color: #ffffff;
color: #1f1f1f;
}
.video-loader {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #ffffff; /* Change to match your brand background */
z-index: 99999;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.5s ease-out, visibility 0.5s;
}
/* Optional: ensure video doesn't overflow if it's huge */
.video-loader video {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* Utility class to hide it */
.loader-hidden {
opacity: 0;
visibility: hidden;
}
h1, h2, h3 {
/* UPDATED: New font family for all headings */
font-family: 'Fraunces', serif;
letter-spacing: 1px;
}
h1 { font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 600; margin: 0.2em 0; }
h2 { font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 400; text-transform: uppercase; letter-spacing: 3px; }
h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; }
p { font-family: 'Inter', sans-serif; line-height: 1.7; color: #555; max-width: 50ch; }
.cta-button {
background-color: transparent;
border: 2px solid #ccc;
color: #333;
padding: 14px 32px;
font-family: 'Inter', sans-serif;
font-weight: 600; /* Adjusted for Inter font */
letter-spacing: 2px;
font-size: 12px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
display: inline-block;
margin-top: 4rem;
}
.cta-button:hover { background-color: #1f1f1f; color: #ffffff; border-color: #1f1f1f; }
/* === Header & Logo === */
.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 40px; height: var(--header-height-initial); color: var(--text-color-light); background-color: transparent; transition: height 0.4s ease, background-color 0.4s ease, color 0.4s ease, border-bottom 0.4s ease; }
.header.compact { height: var(--header-height-compact); background-color: var(--header-compact-bg); color: var(--text-color-dark); border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.header-left, .header-center, .header-right { display: flex; align-items: center; gap: 12px; }
.header-left { justify-content: flex-start; } .header-center { justify-content: center; } .header-right { justify-content: flex-end; }
.header span { font-size: 14px; font-weight: 700; letter-spacing: 1.5px; cursor: pointer; padding-top: 2px; }
.header-icon { width: 24px; height: 24px; cursor: pointer; }
.header-logo { height: 90px; width: auto; transition: transform 0.4s ease; }
.header.compact .header-logo { transform: scale(1); }
.logo-dark { display: none; } .logo-light { display: block; }
.header.compact .logo-dark { display: block; } .header.compact .logo-light { display: none; }
/* ======================================= */
/* ===== HERO SECTION STYLES ===== */
/* ======================================= */
.hero {
height: 100vh;
width: 100%;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: flex-start;
background-color: #ffffff;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
transform: scale(1.15);
}
.hero-background video {
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0.99;
}
.hero-content {
position: relative;
z-index: 2;
padding: 0 clamp(2rem, 11vw, 12rem);
max-width: 100ch;
text-align: left;
color: #1f1f1f;
}
.hero-content h1 {
font-size: clamp(3.5rem, 5.5vw, 5rem);
font-weight: 700;
line-height: 1.15;
margin: 0 0 1.5rem 0;
max-width: 20ch;
}
.hero-content p {
font-size: clamp(1rem, 1.5vw, 1.2rem);
color: #555;
line-height: 1.75;
margin: 0;
max-width: 45ch;
}
.hero-buttons {
margin-top: 2.5rem;
display: flex;
gap: 1rem;
align-items: center;
}
.hero-buttons .cta-button {
margin-top: 0;
}
.cta-primary {
background-color: #254993;
color: #ffffff;
border-color: #254993;
}
.cta-primary:hover {
background-color: #1c3871;
border-color: #1c3871;
color: #ffffff;
}
.cta-secondary {
background-color: transparent;
color: #333;
border-color: #ccc;
}
.cta-secondary:hover {
background-color: #f1f1f1;
color: #1f1f1f;
border-color: #ccc;
}
/* === Section Title Styling (Now inside the carousel section) === */
.section-title-container{
text-align: left;
padding-top: 0;
margin-bottom: 2rem;
}
.section-title-container h1{
position: relative;
display: inline-block;
margin: 0;
line-height: 1.25;
}
/* ======================================= */
/* ===== MOBILE HERO - FIXED LAYOUT ===== */
/* ======================================= */
@media (max-width: 991px) {
.hero {
/* Use block instead of flex to simplify layout flow */
display: block;
/* Full mobile height */
height: 100dvh;
min-height: 600px;
position: relative;
overflow: hidden;
/* Add plenty of space for your logo/header */
padding-top: 150px;
}
/* === TEXT & BUTTONS (TOP HALF) === */
.hero-content {
position: relative;
z-index: 10; /* Ensures text stays ON TOP of the building */
width: 100%;
padding: 0 1.5rem;
/* Center alignment is best for mobile balance */
text-align: center;
}
.hero-content h1 {
font-size: 2.5rem;
line-height: 1.1;
margin-bottom: 1rem;
color: #1f1f1f;
}
.hero-content p {
font-size: 1rem;
line-height: 1.5;
margin: 0 auto 2rem auto;
max-width: 90%; /* Prevents text from hitting the screen edges */
color: #555;
}
.hero-buttons {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
max-width: 400px; /* Keeps buttons looking nice on wider phones */
margin: 0 auto; /* Centers the button group */
}
.hero-buttons .cta-button {
width: 100%;
text-align: center;
padding: 1rem;
}
/* === VIDEO/BUILDING (BOTTOM HALF) === */
.hero-background {
/* Force the background to sit at the bottom, regardless of HTML order */
position: absolute;
bottom: 0;
left: 0;
top: auto; /* Reset desktop styles */
width: 100%;
height: 55%; /* Occupy the bottom 55% of the screen */
transform: none; /* Reset desktop scale */
z-index: 1; /* Sit behind the buttons if they overlap */
pointer-events: none; /* Allows you to click buttons even if video overlaps them */
}
.hero-background video {
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom center;
/* SCALE UP: This zooms in on the building to remove whitespace
and make it look like a large 3D foundation */
transform: scale(1.6);
transform-origin: bottom center;
}
}
/* === Footer === */
.footer {
margin-top: var(--feature-gap);
background-color: #000;
padding: 4rem 20px;
text-align: center;
color: #fff;
}
.footer h3 {
font-size: 1.5rem;
letter-spacing: 5px;
font-weight: 600;
}
.footer p {
font-size: 0.8rem;
letter-spacing: 8px;
text-transform: uppercase;
color: #555;
margin-top: 0.5rem;
}
/* === Left Slide-Out Menu Panel === */
.veil {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .35);
opacity: 0;
pointer-events: none;
transition: opacity .35s ease;
z-index: 1000;
}
.menu-panel {
position: fixed;
inset: 0 60% 0 0;
background: linear-gradient(135deg, rgba(25,25,25,0.6), rgba(35,35,35,0.4));
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-right: 1px solid rgba(255, 255, 255, 0.08);
transform: translateX(-102%);
transition: transform 0.45s cubic-bezier(.22, .61, .36, 1);
z-index: 1001;
display: flex;
flex-direction: column;
padding: 48px 32px 40px;
gap: 32px;
}
.menu-top { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: .18em; font-size: 12px; cursor: pointer; }
.close-x { width: 22px; height: 22px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; position: relative; display: inline-block; transition: .25s; }
.close-x::before, .close-x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1px; background: rgba(255, 255, 255, 0.7); transform-origin: center; transform: translate(-50%, -50%) rotate(45deg); transition: .25s; }
.close-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.close-x:hover { border-color: #fff; }
.close-x:hover::before, .close-x:hover::after { background: #fff; }
.menu-links { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 36px; padding-left: 18%; }
.menu-links a { color: rgba(255, 255, 255, 0.7); text-decoration: none; letter-spacing: .24em; text-transform: uppercase; font-size: 22px; }
.menu-links a:hover { color: #fff; }
.menu-open .veil { opacity: 1; pointer-events: auto; }
.menu-open .menu-panel { transform: translateX(0); }
.menu-links a { opacity: 0; transform: translateX(-40px); transition: transform .4s ease, opacity .4s ease; }
.menu-open .menu-links a { opacity: 1; transform: translateX(0); }
.menu-open .menu-links a:nth-child(1) { transition-delay: .28s }
.menu-open .menu-links a:nth-child(2) { transition-delay: .24s }
.menu-open .menu-links a:nth-child(3) { transition-delay: .20s }
.menu-open .menu-links a:nth-child(4) { transition-delay: .16s }
.menu-open .menu-links a:nth-child(5) { transition-delay: .12s }
.menu-open .menu-links a:nth-child(6) { transition-delay: .08s }
.menu-closing .menu-panel { transform: translateX(-102%); }
.menu-closing .veil { opacity: 0; }
/* === Responsive Adjustments === */
@media (max-width: 900px) {
.feature-container, .feature.feature-reversed .feature-container {
grid-template-columns: 1fr; /* Stack columns on tablet */
}
.feature-image {
height: 60vh; /* Adjust image height for stacked view */
}
}
@media (max-width: 768px) {
.header { padding: 0 20px; }
.header-right span, .header-left span { display: none; }
.menu-panel { inset: 0 20% 0 0; }
.menu-links { padding-left: 10%; }
}
@media (max-width: 640px) {
.menu-panel { inset: 0; }
}
/* ======================================= */
/* ===== SYSTEMS SECTION STYLES ===== */
/* ======================================= */
.systems-section {
background-color: #fefefe;
padding: clamp(40px, 8vh, 80px) 0;
overflow: hidden;
border-top: 40px solid #efefef;
position: relative;
overflow: hidden;
}
/* top ribbon */
.systems-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 7vw; /* visible but still shallow */
/* horizontal blue → white → red */
background: linear-gradient(
to right,
rgba(37, 73, 147, 0.3) 0%,
rgba(255, 255, 255, 0) 50%,
rgba(198, 40, 40, 0.3) 100%
);
/* fade it into the section background vertically */
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 35%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 35%, transparent 100%);
pointer-events: none;
z-index: 0;
}
.systems-section::after {
content: "";
position: absolute;
top: 1px; /* equal to the border-top thickness */
left: 0;
width: 100%;
height: 2px;
background-color: #1a2f59; /* NAVY */
}
.systems-header {
max-width: 960px;
margin: 0 auto;
padding-top: clamp(20px, 4vh, 48px); /* reduced top padding */
padding-bottom: clamp(56px, 10vh, 96px); /* more space below */
text-align: center;
position: relative;
z-index: 3;
}
/* small uppercase label above title */
.systems-kicker {
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #8b96ac;
margin-bottom: 0.75rem;
}
/* premium title */
.systems-header h2 {
font-family: 'Fraunces', serif;
font-size: clamp(2.4rem, 4vw, 3.4rem);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #121826;
line-height: 1.18;
margin-bottom: 1rem;
}
/* subtle decorative line under the title */
.systems-header::after {
content: "";
width: 88px;
height: 3px;
background: linear-gradient(90deg, #254993, #c62828);
display: block;
margin: 1.3rem auto 1.5rem auto;
border-radius: 999px;
opacity: 0.95;
}
/* description under the title */
.systems-header p {
margin: 0 auto;
max-width: 52ch;
font-family: 'Inter', sans-serif;
font-size: 0.98rem;
line-height: 1.7;
color: #4b5563;
}
.systems-container {
max-width: 1600px;
margin: 0 auto; /* Keep this to center the container first */
padding: 0 clamp(1rem, 5vw, 3rem);
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(40px, 6vw, 100px);
align-items: center;
transform: translateX(-5vw); /* ADD THIS LINE */
}
/* --- Left Canvas --- */
.systems-canvas {
position: relative;
aspect-ratio: 1 / 1;
}
.canvas-background-grid {
position: absolute;
inset: -20%; /* Extend grid beyond the container for a seamless look */
background-image:
linear-gradient(rgba(11, 42, 91, 0.04) 1px, transparent 1px),
linear-gradient(to right, rgba(11, 42, 91, 0.04) 1px, transparent 1px);
background-size: 30px 30px;
opacity: 0.5;
}
.systems-poster,
.system-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain; /* Use contain to ensure the whole asset is visible */
transition: opacity 0.5s ease;
}
.system-video {
opacity: 0;
pointer-events: none;
}
/* --- Right Content --- */
.systems-content h2 {
font-family: 'Fraunces', serif;
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 600;
color: #111;
line-height: 1.2;
margin-bottom: 1rem;
text-transform: none; /* Override global uppercase */
letter-spacing: normal; /* Override global letter-spacing */
}
.systems-content > p {
color: #555;
max-width: 50ch;
margin-bottom: 2.5rem;
font-size: clamp(1rem, 1.5vw, 1.1rem);
}
.capability-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.capability-card {
background: #fefefe;
border: 1px solid #E8ECEF;
border-radius: 8px;
padding: 1.5rem;
text-align: left;
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
align-items: flex-start;
gap: 1rem;
}
.capability-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
background-color: #0B2A5B;
transform: translateX(-100%);
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.capability-card .card-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
color: #0B2A5B;
margin-top: 4px;
}
.capability-card h4 {
font-family: 'Fraunces', serif;
font-size: clamp(1.1rem, 2vw, 1.25rem);
color: #1f1f1f;
margin-bottom: 0.5rem;
font-weight: 600;
}
.capability-card p {
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
color: #555;
line-height: 1.6;
max-width: none;
}
/* Active & Hover States */
.capability-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(11, 42, 91, 0.07);
}
.capability-card.active {
border-color: #E8ECEF;
transform: translateY(-4px);
box-shadow: 0 15px 30px rgba(11, 42, 91, 0.1);
}
.capability-card.active::before {
transform: translateX(0);
}
/* --- Responsive for Systems Section --- */
@media (max-width: 992px) {
.systems-container {
grid-template-columns: 1fr;
gap: 3rem;
}
.systems-content {
text-align: center;
}
.systems-content > p {
margin-left: auto;
margin-right: auto;
}
.capability-cards {
max-width: 600px;
margin: 0 auto;
}
}
@media (max-width: 576px) {
.systems-section {
padding: clamp(48px, 10vh, 64px) 0;
}
.systems-container {
padding: 0 1.5rem;
}
.capability-cards {
grid-template-columns: 1fr;
}
.capability-card {
padding: 1.25rem;
}
}
/* ======================================= */
/* ===== SYSTEMS SECTION BUTTON STYLES ===== */
/* ======================================= */
.systems-action-button-container {
position: absolute;
bottom: clamp(40px, 8vw, 80px); /* This keeps the height you like */
left: 50%;
/* UPDATED: Centers the button, then pushes it 150px to the left */
transform: translateX(calc(-50% - 380px));
z-index: 10;
}
/* Make .btn-primary identical to .cta-button + .cta-primary */
.btn-primary {
background-color: #254993;
color: #ffffff;
border: 2px solid #254993;
padding: 14px 32px;
font-family: 'Inter', sans-serif;
font-weight: 600;
letter-spacing: 2px;
font-size: 12px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
display: inline-block;
margin-top: 4rem;
border-radius: 0;
box-shadow: none;
text-align: center;
}
.btn-primary:hover {
background-color: #1c3871;
border-color: #1c3871;
color: #ffffff;
}
/* ======================================= */
/* ===== OUR PROCESS SECTION STYLES ===== */
/* ======================================= */
/* ======================================= */
/* ===== OUR PROCESS SECTION STYLES ===== */
/* ======================================= */
.process-section {
position: relative;
overflow: hidden;
text-align: center;
background: #fefefe;
padding: clamp(120px, 14vw, 180px) clamp(2rem, 8vw, 8rem) clamp(40px, 5vw, 60px);
}
/* restul stilurilor tale rămân la fel */
.process-section .section-title-container,
.process-steps-container,
.process-cta-wrapper {
position: relative;
z-index: 1;
}
/* păstrezi ce aveai deja mai jos (subtitlu, steps, etc.) */
.process-section .process-subtitle {
max-width: 46rem;
margin: 1.4rem auto 2.8rem; /* more space above & below */
text-align: center;
font-family: 'Inter', sans-serif;
font-size: clamp(1.05rem, 1.5vw, 1.2rem); /* noticeably larger */
line-height: 1.8;
letter-spacing: 0.01em;
color: #4b5563; /* solid but not harsh */
font-weight: 400;
opacity: 1;
}
.process-section .section-title-container {
text-align: center;
margin-bottom: 4rem;
}
.process-steps-container {
position: relative;
}
.process-line {
position: absolute;
top: 50px; /* Vertically center on the icon line */
left: 0;
width: 100%;
height: 100px;
z-index: 0;
pointer-events: none; /* Allows clicking through the SVG */
}
.process-line path {
stroke: #254993; /* Your brand's blue color */
stroke-opacity: 0.5;
}
.process-steps {
display: flex;
justify-content: space-between;
gap: 2rem;
position: relative; /* Ensure steps are on top of the line */
z-index: 1;
}
.process-step {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.step-icon {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #ddd;
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.step-icon img {
width: 40px;
height: 40px;
object-fit: contain;
}
.step-content {
max-width: 25ch;
}
.step-number {
font-family: 'Fraunces', serif;
font-size: 1rem;
font-weight: 700;
color: #999;
margin-bottom: 0.5rem;
display: block;
}
.step-content h4 {
font-family: 'Fraunces', serif;
font-size: 1.5rem;
margin-bottom: 0.75rem;
}
.step-content p {
font-size: 0.95rem;
line-height: 1.6;
color: #666;
}
.process-cta-wrapper {
text-align: center;
margin-top: 3rem;
margin-bottom: 2rem;
}
.process-section .cta-button {
border-color: #254993 !important; /* deep architectural blue */
color: #254993 !important;
}
/* Optional: hover effect */
.process-section .cta-button:hover {
background-color: #254993 !important;
color: #ffffff !important;
}
/* --- Responsive adjustments for the Process Section --- */
@media (max-width: 992px) {
.process-line {
display: none; /* Hide the connecting line on tablets and mobile */
}
.process-steps {
flex-direction: column;
align-items: center;
gap: 4rem; /* Increase gap for vertical stacking */
}
}
/* ======================================= */
/* ===== SECTION INTRO BLOCK STYLES ===== */
/* ======================================= */
.section-intro {
text-align: center;
max-width: 800px;
margin: 0 auto;
padding: 60px 20px 100px 20px;
background-color: #fefefe;
position: relative;
overflow: hidden;
}
.section-intro::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
/* Two-layer trick: fade + grid */
background-image:
linear-gradient(to bottom, #fefefe 0%, rgba(254,254,254,0.5) 40%, rgba(254,254,254,0) 100%),
linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
background-size:
100% 100%, 80px 80px, 80px 80px;
z-index: -1;
}
/* --- NEW: Style for the 'CASE STUDIES' tag --- */
.section-tag {
display: inline-block;
background-color: #fefefe; /* Light gray consistent with your site */
color: #555;
padding: 6px 16px;
border-radius: 999px; /* Creates the pill shape */
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 1.5rem;
}
/* --- Update the heading to act as a container --- */
.section-intro h3.underline-heading {
font-family: 'Fraunces', serif;
font-size: clamp(3rem, 6vw, 4rem);
font-weight: 600;
color: #111;
margin-bottom: 1rem;
position: relative;
padding-bottom: 1.5rem;
display: inline-block;
}
/* --- NEW: Style the new underline span --- */
.underline-heading .underline {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #cc3434;
/* Set the initial state for the animation */
transform: scaleX(0.2);
transform-origin: center;
}
.section-intro h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0; /* Position relative to the start of the text */
/* UPDATED: Set the final width to 100% of the text */
width: 100%;
height: 3px;
background-color: #cc3434;
/* ADD THIS: Set the initial scaled-down state for the animation */
transform: scaleX(0.2); /* Starts at 20% of the final width */
transform-origin: center; /* Ensures it scales from the middle */
}
.section-intro p {
font-family: 'Inter', sans-serif;
color: #555;
line-height: 1.75;
font-size: 1.2rem;
max-width: 65ch;
margin-left: auto;
margin-right: auto;
margin-top: 1rem; /* Space between underline and paragraph */
}
/* ======================================= */
/* ===== NEW IMAGE CARD SECTION STYLES ===== */
/* ======================================= */
.image-card-section {
background-color: #fefefe;
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
background-size: 60px 60px; /* adjust tighter or looser */
}
.image-card-grid {
max-width: 1330px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem; /* Space between cards */
}
.image-card {
height: 600px;
background: #161616;
position: relative;
overflow: hidden;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.20);
cursor: pointer;
transition: transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.image-card:hover {
transform: scale(1.05);
}
/* Image with Gradient Overlay */
.image-card .image {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 100%;
}
.image-card .image img {
width: 100%;
height: 100%;
object-fit: cover; /* Ensures image fills the card without stretching */
display: block;
}
.image-card .image::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
z-index: 1;
}
/* Content positioned at the bottom */
.image-card .content {
position: absolute;
z-index: 2;
bottom: 80px;
left: 0;
right: 0;
padding: 0 24px;
color: #f3f3f3;
transition: bottom 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.image-card:hover .content {
bottom: 100px;
}
/* --- TYPOGRAPHY ADAPTED TO YOUR SITE --- */
.image-card h3 {
/* Uses your site's existing h3 font */
font-family: 'Fraunces', serif;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #ffffff; /* Explicitly set color for the dark background */
}
.image-card p {
/* Uses your site's existing paragraph font */
font-family: 'Inter', sans-serif;
font-size: 1rem;
line-height: 1.6;
letter-spacing: 0.5px;
margin-top: 0.5rem;
max-width: 100%; /* Overrides global max-width for paragraphs */
color: #e0e0e0; /* A slightly softer white for readability */
}
/* --- Responsive for Image Card Section --- */
@media (max-width: 992px) {
.image-card-grid {
grid-template-columns: 1fr;
max-width: 450px; /* Constrains width on mobile for better appearance */
}
}
/* ======================================= */
/* ===== ANIMATED WAVE DIVIDER ===== */
/* ======================================= */
.wave-divider {
position: relative;
width: 100%;
height: 100px; /* Adjust height of the wave area */
overflow: hidden;
}
.wave-divider .editorial {
display: block;
width: 100%;
height: 100px;
margin: 0;
}
.parallax1 > use {
animation: move-forever1 10s linear infinite;
}
.parallax1 > use:nth-child(1) {
animation-delay: -2s;
}
.parallax2 > use {
animation: move-forever2 8s linear infinite;
}
.parallax2 > use:nth-child(1) {
animation-delay: -2s;
}
.parallax3 > use {
animation: move-forever3 6s linear infinite;
}
.parallax3 > use:nth-child(1) {
animation-delay: -2s;
}
.parallax4 > use {
animation: move-forever4 4s linear infinite;
}
.parallax4 > use:nth-child(1) {
animation-delay: -2s;
}
@keyframes move-forever1 {
0% { transform: translate(85px, 0%); }
100% { transform: translate(-90px, 0%); }
}
@keyframes move-forever2 {
0% { transform: translate(-90px, 0%); }
100% { transform: translate(85px, 0%); }
}
@keyframes move-forever3 {
0% { transform: translate(85px, 0%); }
100% { transform: translate(-90px, 0%); }
}
@keyframes move-forever4 {
0% { transform: translate(-90px, 0%); }
100% { transform: translate(85px, 0%); }
}
/* ======================================= */
/* ===== CONTACT SECTION STYLES ===== */
/* ======================================= */
/* ============================== */
/* CONTACT SECTION – SOFT BLOBS */
/* ============================== */
.contact-section {
position: relative;
padding-top: clamp(60px, 8vw, 100px);
padding-bottom: clamp(60px, 8vw, 100px);
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
/* Base color – very light, almost white */
background-color: #fefefe;
/* UPDATE THIS SECTION */
background-image:
/* 1. The Fade Overlay (must come first) */
linear-gradient(to bottom, #fefefe 0%, rgba(254, 254, 254, 0) 300px),
/* 2. Your Existing Pattern */
repeating-linear-gradient(
135deg,
rgba(37, 73, 147, 0.06) 0px,
rgba(37, 73, 147, 0.06) 34px,
transparent 34px,
transparent 140px
);
/* YOU MUST ALSO UPDATE THIS to handle both layers */
background-size:
100% auto, /* Size for the top fade gradient */
260px 260px; /* Size for the repeating pattern */
}
/* make sure old overlays are off */
.contact-section::before,
.contact-section::after {
display: none !important;
}
/* conținutul de contact rămâne deasupra pattern-ului */
.contact-section > * {
position: relative;
z-index: 1;
}
.contact-header {
text-align: center;
margin-bottom: 6rem; /* Increased from 3rem for more space above the card */
max-width: 800px;
}
.contact-header h2 {
font-family: 'Fraunces', serif;
font-size: clamp(2.5rem, 5vw, 3.5rem);
color: #1a1a1a;
margin-bottom: 1rem;
line-height: 1.1;
}
.contact-header p {
font-family: 'Inter', sans-serif;
color: #666;
font-size: 1.35rem; /* Increased from 1.125rem */
line-height: 1.6;
}
/* --- Main Card Container --- */
.contact-card-container {
background-color: #ffffff;
border-radius: 24px; /* More rounded corners like screenshot */
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
display: flex;
max-width: 1100px; /* Slightly narrower for a tighter look */
width: 100%;
overflow: hidden;
min-height: 450px; /* Ensure substantial height */
}
/* --- Common Half Styles --- */
.contact-half {
flex: 1;
padding: 4rem;
display: flex;
align-items: center; /* Vertically center content */
}
/* --- LEFT SIDE --- */
.contact-left {
/* Optional: subtle pattern only on left side if desired,
otherwise remove background-image for pure white */
background-color: #fff;
}
/* Wrapper to keep items together while centered */
.contact-info-wrapper {
display: flex;
flex-direction: column;
gap: 2.5rem; /* More space between items */
width: 100%;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 1.25rem;
}
.contact-item .icon {
color: #1a3b8e; /* Darker, bolder blue from screenshot */
width: 28px;
height: 28px;
flex-shrink: 0;
margin-top: 4px; /* Align with text cap-height */
}
.contact-item .text {
font-family: 'Inter', sans-serif;
}
.contact-item .label {
display: block;
font-size: 1.25rem; /* BIGGER LABEL */
font-weight: 700; /* BOLDER */
color: #1a1a1a;
margin-bottom: 0.5rem;
}
.contact-item .value {
font-size: 1.125rem; /* BIGGER VALUE */
color: #444;
line-height: 1.4;
}
/* --- RIGHT SIDE --- */
.contact-right {
justify-content: center; /* Horizontally center content */
/* Kept plain white to match screenshot right side */
background-color: #ffffff;
}
.contact-action-wrapper {
width: 100%;
max-width: 400px; /* constrain width for centering */
display: flex;
flex-direction: column;
gap: 2rem;
}
.contact-action-wrapper h3 {
font-family: 'Fraunces', serif;
font-size: 2.2rem; /* MUCH BIGGER HEADING */
color: #1a1a1a;
line-height: 1.2;
margin-bottom: 0.5rem;
}
.contact-description {
font-family: 'Inter', sans-serif;
font-size: 1.15rem; /* Slightly larger for readability */
line-height: 1.6;
color: #555;
margin-bottom: 0.5rem; /* Space before button */
}
.contact-btn-wide {
width: 100%;
padding: 1.25rem; /* Taller button */
font-size: 1.125rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
/* --- Responsive --- */
@media (max-width: 900px) {
.contact-card-container {
flex-direction: column;
max-width: 600px; /* Limit width when stacked */
}
.contact-half {
padding: 3rem 2rem;
}
.contact-left {
border-bottom: 1px solid #eee;
}
}
/* ======================================= */
/* ===== NEW SITE FOOTER STYLES ===== */
/* ======================================= */
.site-footer {
background-color: #1a1a1a; /* Dark background from your screenshot */
color: #e0e0e0;
font-family: 'Inter', sans-serif;
position: relative; /* Needed for the top glowing line */
padding-top: 5px; /* Space for the line to sit */
}
/* The glowing red line at the top */
.site-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
/* UPDATED: Changed from a solid color to a gradient */
background: linear-gradient(to right, white, #cc3434 50%, white);
/* The box-shadow creates the glow, keeping it red for a strong central effect */
box-shadow: 0 0 10px 1px #cc3434;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 4rem clamp(1.5rem, 5vw, 3rem);
}
.footer-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* Four equal columns */
gap: 2rem;
margin-bottom: 3rem; /* Space between columns and bottom section */
}
.footer-column h4 {
font-family: 'Fraunces', serif;
font-size: 1.5rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 1.5rem;
}
.footer-links a {
color: #c0c0c0; /* A lighter gray for links */
text-decoration: none;
display: block;
margin-bottom: 1rem;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: #ffffff;
}
/* Bottom section with copyright and social icons */
.footer-bottom {
border-top: 1px solid #444; /* The thin divider line */
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.copyright {
font-size: 0.9rem;
color: #aaa;
}
.social-icons {
display: flex;
gap: 1rem;
}
.social-icons a {
color: #aaa;
transition: color 0.3s ease;
}
.social-icons a:hover {
color: #ffffff;
}
/* --- Responsive for Footer --- */
@media (max-width: 992px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr); /* 2x2 grid on tablets */
gap: 3rem;
}
}
@media (max-width: 576px) {
.footer-grid {
grid-template-columns: 1fr; /* Single column on mobile */
text-align: center;
}
.footer-bottom {
flex-direction: column; /* Stack copyright and socials */
gap: 1.5rem;
}
}
.hero-reversed {
height: 100vh;
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
background-color: #fefefe;
overflow: hidden;
isolation: isolate;
z-index: 0;
}
/* === Grid appears only on right side (behind text) === */
.hero-reversed::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
/* grid pattern */
background-image:
linear-gradient(to right, rgba(88,144,255,0.12) 1px, transparent 1px),
linear-gradient(to bottom, rgba(88,144,255,0.12) 1px, transparent 1px);
background-size: 36px 36px;
mix-blend-mode: multiply;
/* visible only on right half — no fade over building */
mask-image: linear-gradient(
to right,
transparent 0%,
transparent 38%,
black 55%,
black 100%
);
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
transparent 38%,
black 55%,
black 100%
);
/* fade vertically at top and bottom only */
mask-composite: intersect;
-webkit-mask-composite: destination-in;
mask-image:
linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%),
linear-gradient(to right, transparent 0%, transparent 38%, black 55%, black 100%);
-webkit-mask-image:
linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%),
linear-gradient(to right, transparent 0%, transparent 38%, black 55%, black 100%);
opacity: 0.8; /* stronger visibility */
}
/* === Top/bottom soft fade only (keeps logo and footer area clean) === */
.hero-reversed::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(254, 254, 254, 1) 0%,
rgba(254, 254, 254, 0.85) 10%,
rgba(254, 254, 254, 0) 30%,
rgba(254, 254, 254, 0) 70%,
rgba(254, 254, 254, 0.85) 90%,
rgba(254, 254, 254, 1) 100%
);
}
/* === Content area remains above the grid === */
.hero-reversed .hero-content {
position: relative;
z-index: 3;
text-align: right;
}
.hero-reversed .hero-content h1,
.hero-reversed .hero-content p {
margin-left: auto;
margin-right: 0;
}
.hero-reversed .hero-buttons {
justify-content: flex-end;
}
/* Red underline */
.hero-reversed .hero-content h1 {
position: relative;
padding-bottom: 0;
}
.hero-reversed .hero-content h1::after {
content: '';
display: block;
/* 👇 Bigger underline */
width: clamp(260px, 18vw, 460px);
height: 3px;
background-color: #E60000;
margin-top: 1.5rem;
border-radius: 2px;
margin-left: calc(50% + 105px);
transform: translateX(-50%);
animation: draw-line 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s forwards;
}
@keyframes draw-line {
from { width: 0; opacity: 0; }
to {
/* 👇 Same value as above */
width: clamp(260px, 18vw, 460px);
opacity: 1;
}
}
/* Video background */
.hero-reversed-background {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-reversed-background video {
width: 100%;
height: 100%;
object-fit: cover;
/* Ken Burns base state */
transform: scale(1);
transform-origin: center center;
will-change: transform;
transition: transform 0.15s ease-out; /* smooth small adjustments */
}
/* ======================================= */
/* ===== HERO REVERSED CTA BUTTONS ======= */
/* ======================================= */
.hero-reversed .cta-button {
display: inline-block;
font-family: 'Inter', sans-serif;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 0.9rem 2rem;
border-radius: 2px;
text-decoration: none;
transition: all 0.25s ease;
}
/* === Primary red button (Explore Our Innovations) === */
.hero-reversed .cta-primary {
background-color: #E60000; /* PRIMO red */
color: #ffffff;
border: none;
}
.hero-reversed .cta-primary:hover {
background-color: #B80000; /* darker red */
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(230, 0, 0, 0.25);
}
.hero-reversed .cta-primary:active {
background-color: #A00000;
transform: translateY(0);
box-shadow: 0 2px 6px rgba(230, 0, 0, 0.25);
}
/* === Secondary outline button (Our Expertise) === */
.hero-reversed .cta-secondary {
background-color: transparent;
color: #1a1a1a;
border: 2px solid #E60000;
}
.hero-reversed .cta-secondary:hover {
background-color: #E60000;
color: #ffffff;
border-color: #E60000;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(230, 0, 0, 0.25);
}
.hero-reversed .cta-secondary:active {
background-color: #B80000;
border-color: #B80000;
color: #ffffff;
transform: translateY(0);
box-shadow: 0 2px 6px rgba(230, 0, 0, 0.25);
}
/* spacing between the two */
.hero-reversed .hero-buttons {
display: flex;
gap: 1rem;
justify-content: flex-end;
flex-wrap: wrap;
}
/* ======================================= */
/* ======== SERVICES GRID SECTION ======== */
/* ======================================= */
:root{
--page-gutter: clamp(16px, 5vw, 48px); /* horizontal padding math-safe */
--grid-line: #A8A8A8; /* single source of truth for lines */
}
/* SECTION WRAPPER */
.services-section {
padding-top: 5rem;
padding-bottom: 5rem;
padding-left: clamp(1rem, 5vw, 5rem);
padding-right: clamp(1rem, 5vw, 5rem);
/* Technical White Fade (flows from hero → grid) */
background: linear-gradient(to bottom, #fefefe 0%, #F6F6F6 60%, #efefef 100%);
position: relative;
z-index: 10;
overflow: hidden;
}
/* Subtle blueprint grid overlay (more visible on the pale blue) */
.services-section::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(30,58,138,0.06) 1px, transparent 1px),
linear-gradient(to right, rgba(30,58,138,0.06) 1px, transparent 1px);
background-size: 30px 30px;
pointer-events: none;
z-index: 0;
mask-image: linear-gradient(to bottom,
rgba(0,0,0,0.25) 0%,
rgba(0,0,0,0.18) 35%,
rgba(0,0,0,0.08) 65%,
rgba(0,0,0,0.0) 100%);
}
/* Ambient top light */
.services-section::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top center, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 70%);
pointer-events: none;
z-index: 0;
}
/* Keep all children above overlays */
.services-section > * { position: relative; z-index: 1; }
/* INTRO BLOCK */
.services-intro {
text-align: center;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 5rem;
}
.services-intro__heading {
font-family: 'Fraunces', serif;
font-size: clamp(2.5rem, 4.5vw, 4rem);
font-weight: 500;
line-height: 1.25;
color: #1a1a1a;
max-width: 25ch;
margin: 0 auto 2rem auto;
}
.services-intro__description {
font-family: 'Inter', sans-serif;
font-size: clamp(1.1rem, 1.5vw, 1.25rem);
line-height: 1.7;
color: #555;
max-width: 60ch;
margin: 0 auto;
}
/* GRID (true centered container) */
.services-grid{
width: min(1400px, calc(100% - 2 * var(--page-gutter)));
margin-inline: auto; /* mathematically centered */
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
position: relative;
}
/* Animated top border for whole grid */
.services-grid::before{
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 2.5px;
background-color: var(--grid-line);
transform-origin: left;
transform: scaleX(var(--scaleGridTop, 0)); /* you animate this */
}
/* Single central vertical rule for perfect symmetry */
.services-grid::after{
content: "";
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 0;
border-left: 2.5px solid var(--grid-line);
pointer-events: none;
}
/* CARDS */
.service-item{
display: flex;
justify-content: space-between;
align-items: center;
gap: 2.5rem;
padding: 3rem clamp(1.75rem, 4vw, 3.5rem);
position: relative;
}
/* Horizontal bottom line (animated per card) */
.service-item::before{
content: "";
position: absolute;
bottom: 0; left: 0;
width: 100%; height: 2.5px;
background-color: var(--grid-line);
transform-origin: left;
transform: scaleX(var(--scaleX, 0)); /* you animate this */
}
/* REMOVE per-card vertical line to avoid misalignment */
.service-item:nth-child(odd)::after{ content: none; }
.service-item__content {
flex: 1;
max-width: 55%; /* keeps text from stretching across the whole panel */
}
.service-item__number{
font-family: 'Inter', sans-serif;
color: #666;
font-size: 0.9rem;
margin-bottom: 2rem;
display: block;
}
/* Slightly smaller headings in the grid */
.service-item__heading {
font-family: 'Fraunces', serif;
font-size: clamp(1.9rem, 3vw, 2.5rem); /* was larger before */
font-weight: 500;
line-height: 1.2;
color: #1a1a1a;
margin: 0 0 0.5rem 0;
}
/* One-line, lighter descriptions */
.service-item__description {
font-family: 'Inter', sans-serif;
color: #555;
font-size: 0.98rem;
line-height: 1.5;
max-width: 42ch; /* stops text before it crashes into the image area */
margin: 0;
}
/* Make icons feel a touch lighter & consistent */
.service-item__visual img {
width: 220px;
height: 220px;
object-fit: contain;
flex-shrink: 0;
}
/* TAGLINE */
.services-tagline{
font-family: 'Fraunces', serif;
font-size: clamp(1.5rem, 2vw, 1.8rem);
text-align: center;
margin: 5rem auto 0 auto;
max-width: 40ch;
color: #1a1a1a;
font-weight: 500;
}
/* RESPONSIVE */
@media (max-width: 992px){
.services-grid{ grid-template-columns: 1fr; }
.services-grid::after{ display: none; } /* hide central rule on 1-col */
}
@media (max-width: 576px){
.service-item{
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.service-item__visual{ margin-top: 2rem; align-self: center; }
.service-item__heading{ font-size: 1.8rem; }
.services-tagline{ font-size: 1.3rem; }
}
/* Keep your existing scroll keyframes if used elsewhere */
@keyframes scroll{
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* The main section wrapper */
.ticker-section {
background-color: #ffffff;
border-top: 1px solid #EAEAE9;
border-bottom: 1px solid #EAEAE9;
padding: 2.5rem 0; /* Vertical padding for the band */
}
/* Wrapper to hide overflow and add fade */
.ticker-wrap {
overflow: hidden;
width: 100%;
/* This adds a soft fade on the left and right edges */
-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
/* The moving container that holds both lists */
.ticker-move {
display: flex;
width: 200%; /* It's 200% because it holds two 100%-width lists */
animation: scroll 30s linear infinite; /* Adjust 30s to be faster or slower */
}
/* Pause the animation on hover */
.ticker-move:hover {
animation-play-state: paused;
}
/* Each list (one real, one duplicate) */
.ticker-list {
width: 100%; /* Each list takes up half of the .ticker-move container */
display: flex;
align-items: center;
justify-content: space-around; /* This creates the clean, even spacing */
}
/* A single certification item */
.ticker-item {
font-family: 'Inter', sans-serif;
font-size: 1rem;
color: #555;
font-weight: 500;
white-space: nowrap; /* Prevents text from wrapping */
padding: 0 1rem;
}
/* ======================================= */
/* ===== VIDEO CTA SECTION STYLES ===== */
/* ======================================= */
.video-cta-section {
position: relative;
width: 100%;
/* MODIFIED: Removed horizontal padding to use the content's padding instead */
padding: clamp(6rem, 15vh, 10rem) 0;
display: flex;
/* MODIFIED: Changed 'center' to 'flex-start' to align the content box left */
justify-content: flex-start;
align-items: center; /* Keeps it vertically centered */
/* MODIFIED: Changed text-align for the content inside */
text-align: left;
overflow: hidden;
background-color: #1f1f1f;
}
.video-cta-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.video-cta-background video {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-cta-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(15, 15, 15, 0.65);
z-index: 2;
/* ADD THIS LINE to hide the overlay */
display: none;
}
.video-cta-content {
position: relative;
z-index: 3;
color: #ffffff;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
/* * === MODIFIED LINE ===
* I've reduced the padding again from "7vw, 8rem" to "5vw, 5rem".
* This will move the text block even further to the left.
* You can make the "5vw" and "5rem" even smaller if you need!
*/
padding: 0 clamp(4rem, 10vw, 10rem);
max-width: 80ch;
}
/* Reusing your site's heading font */
.video-cta-content h2 {
font-family: 'Fraunces', serif;
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 600;
color: #1f1f1f;
margin: 0;
/* Reset any global styles that might conflict */
text-transform: none;
letter-spacing: normal;
}
/* Reusing your site's paragraph font */
.video-cta-content p {
font-family: 'Inter', sans-serif;
color: #555; /* A slightly softer white */
font-size: 1.1rem;
line-height: 1.7;
max-width: 55ch; /* Control line length */
margin: 0;
/* Override global max-width for this context */
max-width: 55ch;
}
/* We can reuse the .hero-buttons class for layout */
.video-cta-content .hero-buttons {
margin-top: 1.5rem; /* Space above the buttons */
}
/* * NEW OPTIONAL BUTTON STYLE
* A "light" button for dark backgrounds, as .cta-secondary won't work.
* Use this by adding class="cta-button cta-light"
*/
.cta-light {
background-color: transparent;
border-color: #555; /* Keeps the dark border */
color: #1f1f1f; /* CHANGED: This makes the text dark to match your H2/p */
}
.cta-light:hover {
background-color: #1f1f1f; /* CHANGED: Dark background on hover */
color: #ffffff; /* CHANGED: White text on hover */
border-color: #1f1f1f; /* CHANGED: Dark border on hover */
}
/* ======================================= */
/* ===== VIDEO CTA MOBILE - FULL BLEED ===== */
/* ======================================= */
@media (max-width: 991px) {
.video-cta-section {
display: flex;
flex-direction: column;
/* IMPORTANT: Remove padding from the parent so the video can touch edges */
padding: 0 !important;
height: auto;
background-color: #ffffff;
}
.video-cta-content {
order: 1; /* Text first */
width: 100%;
/* Add padding directly to the content wrapper instead */
padding: 4rem 1.5rem 3rem 1.5rem;
display: flex;
flex-direction: column;
align-items: center; /* Center everything */
text-align: center;
z-index: 10;
}
.video-cta-content h2 {
font-size: 2.25rem;
line-height: 1.15;
margin-bottom: 1rem;
color: #1f1f1f;
max-width: 15ch; /* Force a nice line break */
}
.video-cta-content p {
font-size: 1rem;
line-height: 1.6;
color: #555;
margin-bottom: 2rem;
max-width: 90%;
}
.hero-buttons {
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
}
.hero-buttons .cta-button {
width: 100%;
justify-content: center;
text-align: center;
padding: 1rem; /* Chunky touch target */
}
/* Improve the secondary button visibility on white */
.cta-secondary {
border: 1px solid #1f1f1f;
color: #1f1f1f;
}
/* === THE FULL BLEED VIDEO FIX === */
.video-cta-background {
order: 2; /* Video second */
position: relative;
/* FORCE full width to kill white bars */
width: 100% !important;
min-width: 100vw;
left: 0;
right: 0;
/* Give it a substantial height to anchor the page */
height: 50vh;
min-height: 400px;
}
.video-cta-background video {
width: 100%;
height: 100%;
object-fit: cover;
/* CHANGED: Moves the video image to the left.
0% is all the way left, 50% is center.
Try 30% or 20% if you want it further left. */
object-position: 100% center;
}
/* Hide the dark overlay since we are using a white background now */
.video-cta-overlay {
display: none;
}
}
/* ======================================= */
/* ===== TABLET / IPAD PRO (Landscape) ===== */
/* ======================================= */
@media (min-width: 992px) and (max-width: 1400px) {
.video-cta-section {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
overflow: hidden;
min-height: 600px; /* Ensure enough vertical space */
}
/* === 1. BACKGROUND (Untouched) === */
.video-cta-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.video-cta-background video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* === 2. TEXT CONTENT (Restricted Width) === */
.video-cta-content {
position: relative;
z-index: 2;
/* CHANGED: Reduced from 50% to 40% to stop before the building */
width: 35%;
/* Keeps the text strictly aligned to the left edge (same as logo) */
margin-left: 5vw;
padding: 0;
text-align: left;
}
.video-cta-content h2 {
font-size: 2.5rem;
color: #1f1f1f;
margin-bottom: 1rem;
}
.video-cta-content p {
color: #555;
font-size: 1rem;
max-width: 100%; /* Fill the container */
}
/* Stack buttons or keep row depending on preference, row usually fits here */
.video-cta-content .hero-buttons {
flex-direction: row;
width: auto;
}
}
/* ======================================= */
/* ===== ABOUT US - HERO (Updated) ======= */
/* ======================================= */
.about-hero {
position: relative;
display: flex;
align-items: center;
min-height: 100vh;
width: 100%;
color: #111;
overflow: hidden;
background:
/* Base white fade from left */
linear-gradient(
to right,
rgba(255,255,255,0.96) 0%,
rgba(255,255,255,0.90) 20%,
rgba(255,255,255,0.40) 55%,
rgba(255,255,255,0.0) 75%
),
/* Soft white fade only at top-right corner */
radial-gradient(
circle at 95% 5%,
rgba(255,255,255,0.6) 0%,
rgba(255,255,255,0.35) 20%,
rgba(255,255,255,0.15) 40%,
rgba(255,255,255,0) 70%
),
url("abouthero.png") center right / cover no-repeat;
}
/* Grid pattern behind text, fading vertically AND to the right */
.about-hero::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
background-size: 30px 30px;
/* Fade top/bottom + fade out as you go right */
mask-image:
linear-gradient(to right, black 0%, black 55%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
-webkit-mask-image:
linear-gradient(to right, black 0%, black 55%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
mask-composite: intersect;
-webkit-mask-composite: destination-in;
pointer-events: none;
}
/* Text block – extended further to the right */
.about-hero-content {
position: relative;
z-index: 2;
max-width: 1000px; /* was 600px – gives you more width */
padding: clamp(3rem, 8vw, 6rem) clamp(2rem, 10vw, 8rem);
}
.about-hero-content h1 {
font-family: "Fraunces", serif;
font-weight: 700;
font-size: clamp(2.5rem, 5vw, 4rem);
margin-bottom: 1.5rem;
line-height: 1.1;
}
.about-hero-content p {
font-family: "Inter", sans-serif;
font-size: clamp(1.1rem, 1.5vw, 1.25rem);
margin-bottom: 2.5rem;
max-width: 40rem; /* gives the paragraph room to breathe horizontally */
}
.hero-buttons {
display: flex;
gap: 1.5rem;
}
/* Responsive */
@media (max-width: 992px) {
.about-hero {
background-position: center;
background-size: cover;
justify-content: center;
text-align: center;
}
.about-hero-content {
max-width: 90%;
padding: 4rem 2rem;
}
.hero-buttons {
justify-content: center;
}
}
/* ======================================= */
/* ===== ABOUT US - 2️⃣ JOURNEY SECTION ===== */
/* ======================================= */
.about-journey {
display: grid;
/* This creates the 50/50 split */
grid-template-columns: 1fr 1fr;
align-items: center;
width: 100%;
min-height: 100vh;
background-color: #f3f3f1;
/* Added for the top fade */
position: relative;
isolation: isolate;
}
/* === NEW: The white fade-in gradient === */
.about-journey::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120px; /* Adjust this height to control the fade distance */
/* Fades from the white section above (#ffffff) to transparent */
background: linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0) 100%);
/* Sits on top of the content */
z-index: 2;
/* Allows clicks to pass through */
pointer-events: none;
}
/* 1. Image/Video Column (Left) */
.journey-image {
width: 100%;
height: 100%;
overflow: hidden;
/* Sits under the fade */
position: relative;
z-index: 1;
}
.journey-image video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block; /* Removes any bottom space */
}
/* 2. Content Column (Right) */
.journey-content {
display: flex;
flex-direction: column;
justify-content: center;
/* Generous padding to match the mockup */
padding: clamp(4rem, 10vw, 8rem) clamp(2rem, 8vw, 7rem);
/* Sits under the fade */
position: relative;
z-index: 1;
}
/* Style for the "OUR JOURNEY" tag */
.journey-content h5 {
font-family: 'Inter', sans-serif;
/* UPDATED: Increased font size */
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 3px;
color: #777;
/* UPDATED: Added a bit more space below */
margin-bottom: 2rem;
}
/* Style for the main heading */
.journey-content h2 {
font-family: 'Fraunces', serif;
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 600;
/* UPDATED: Increased line-height for more breathing room */
line-height: 1.35;
color: #1f1f1f;
margin-bottom: 2rem;
text-transform: none;
letter-spacing: normal;
}
/* Style for the paragraphs */
.journey-content p {
/* UPDATED: Increased font-size again */
font-size: 1.2rem;
/* UPDATED: Increased line-height for the new size */
line-height: 1.9;
/* UPDATED: Increased space BETWEEN paragraphs */
margin-bottom: 2.2rem;
}
/* This rule remains the same */
.journey-content p:last-of-type {
margin-bottom: 0;
}
/* === Responsive for Journey Section === */
@media (max-width: 992px) {
.about-journey {
/* Stack to a single column */
grid-template-columns: 1fr;
}
.journey-image {
/* Give the image a fixed height when stacked */
height: 400px;
}
.journey-content {
/* Adjust padding for smaller screens */
padding: 4rem 2rem;
}
}
/* ======================================= */
/* ===== ABOUT US - 3️⃣ VALUES SECTION ===== */
/* ======================================= */
.about-values {
/* Fades from the previous section's beige to a slightly different tone */
background: linear-gradient(to bottom, #f3f3f1 0%, #fefefe 100%);
padding: clamp(4rem, 10vw, 8rem) clamp(1.5rem, 5vw, 3rem);
text-align: center;
/* === NEW: Add this line === */
border-top: 20px solid #efefef; /* A soft, light grey divider */
}
/* Style for the "OUR VALUES" tag */
.about-values h5 {
font-family: 'Inter', sans-serif;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 3px;
color: #888; /* Slightly darker than the journey 'h5' */
margin-bottom: 2rem;
}
/* Style for the main heading */
.about-values h2 {
font-family: 'Fraunces', serif;
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 600;
line-height: 1.35;
color: #1f1f1f;
margin: 0 auto 1.5rem auto; /* Center it */
max-width: 20ch;
/* Reset global h2 styles */
text-transform: none;
letter-spacing: normal;
/* Added for the decorative line */
position: relative;
padding-bottom: 1.5rem;
}
/* The decorative underline from the mockup */
.about-values h2::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px; /* Width of the line */
height: 3px; /* Thickness of the line */
background-color: #254993; /* Your brand blue */
}
/* The 4-column grid */
.values-grid {
display: grid;
/* Creates 4 columns */
grid-template-columns: repeat(4, 1fr);
gap: 3rem; /* Space between items */
/* Constrain the grid width */
max-width: 1480px;
margin: 4rem auto 0 auto; /* Space above and center */
}
.value-item {
text-align: center;
}
.value-item img {
height: 150px; /* Adjust icon size as needed */
width: auto;
margin-bottom: 1.5rem;
color: #254993; /* In case SVGs use currentColor */
}
/* The heading for each value */
.value-item h3 {
font-family: 'Fraunces', serif;
font-size: clamp(1.5rem, 3vw, 1.8rem);
font-weight: 600;
color: #1f1f1f;
margin-bottom: 1rem;
}
/* The paragraph for each value */
.value-item p {
font-size: 1rem;
line-height: 1.7;
color: #555;
/* Centers the text block if it's not full width */
margin: 0 auto;
}
/* === Responsive for Values Section === */
@media (max-width: 992px) {
/* Change to 2 columns on tablets */
.values-grid {
grid-template-columns: repeat(2, 1fr);
gap: 4rem; /* Add more vertical gap */
}
}
@media (max-width: 576px) {
/* Stack to 1 column on mobile */
.values-grid {
grid-template-columns: 1fr;
gap: 3.5rem;
}
}
.section-divider {
width: 100%;
height: 12px;
background: linear-gradient(
to bottom,
#f9f9f9 0%,
#eaeaea 100%
);
border-top: 1px solid #e3e3e3;
border-bottom: 1px solid #f5f5f5;
margin: 5rem 0;
}
/* ========================================= */
/* ===== ABOUT US - STORY & TIMELINE ===== */
/* ========================================= */
/* 1. NEW: Wrapper to hold the gradient and padding */
.about-story-wrapper {
/* Fades from previous section to white */
background-color: #ffffff;
background-image: repeating-linear-gradient(
45deg,
rgba(0, 0, 0, 0.03) 0px,
rgba(0, 0, 0, 0.03) 1px,
transparent 1px,
transparent 40px
);
/* --- UPDATED PADDING --- */
/* Top padding is now smaller */
padding-top: clamp(3rem, 6vw, 5rem);
/* Bottom padding is now bigger */
padding-bottom: clamp(6rem, 12vw, 10rem);
/* Horizontal padding remains 0 */
padding-left: 0;
padding-right: 0;
}
/* 2. New Header Styling */
.story-header {
text-align: center;
max-width: 800px;
margin: 0 auto 5rem auto; /* 5rem pushes the timeline down */
padding: 0 1.5rem;
}
.story-header h2 {
font-family: 'Fraunces', serif;
font-size: clamp(2.5rem, 5vw, 3.5rem);
color: #1a1a1a;
margin-bottom: 1rem;
line-height: 1.1;
}
.story-header p {
font-family: 'Inter', sans-serif;
font-size: 1.25rem;
color: #666;
line-height: 1.6;
}
/* 3. Updated Timeline Container (Now just handles Grid layout) */
.about-timeline {
/* Removed background from here (moved to wrapper) */
/* Removed top/bottom padding (moved to wrapper) */
padding: 0 clamp(1.5rem, 5vw, 3rem); /* Only side padding */
display: grid;
grid-template-columns: 1fr 1.1fr;
align-items: flex-start; /* Changed to flex-start so top aligns better */
gap: 4rem;
max-width: 1600px;
margin: 0 auto;
}
/* (Keep your existing .timeline and .timeline-cards styling below this) */
/* === 1. Timeline (Left Side) === */
.timeline {
position: relative;
display: grid;
/* 3 columns for the 3 years */
grid-template-columns: repeat(3, 1fr);
align-items: start;
/* Top padding for the line and dots */
padding-top: 2rem;
}
/* The horizontal line */
.timeline::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background-color: #DDE2E8; /* Light blue-grey line */
z-index: 1;
}
.year {
position: relative;
z-index: 2; /* Sits on top of the line */
/* Space for the dot */
padding-top: 1.5rem;
}
/* The dot above each year */
.year::before {
content: '';
position: absolute;
top: -6px; /* Sits halfway on the line */
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #254993; /* Your brand blue */
}
/* Position dots and text */
.year:nth-child(1) {
text-align: left;
}
.year:nth-child(1)::before {
left: 0;
}
.year:nth-child(2) {
text-align: center;
}
.year:nth-child(2)::before {
left: 50%;
transform: translateX(-50%);
}
.year:nth-child(2) p {
margin: 0 auto; /* Center paragraph */
}
.year:nth-child(3) {
text-align: right;
}
.year:nth-child(3)::before {
left: auto;
right: 0;
}
.year:nth-child(3) p {
margin-left: auto; /* Right-align paragraph */
}
/* Year text styling */
.year h3 {
font-family: 'Fraunces', serif;
font-size: clamp(1.3rem, 2vw, 1.5rem);
font-weight: 600;
color: #1f1f1f;
margin-bottom: 0.75rem;
}
.year p {
font-size: 0.95rem;
line-height: 1.6;
color: #555;
max-width: 25ch; /* Keeps text from colliding */
}
/* === 2. Cards (Right Side) === */
.timeline-cards {
display: grid;
/* 3 columns for the 3 cards */
grid-template-columns: repeat(3, 1fr);
/* Card panel styling from mockup */
background-color: #fefefe; /* Very light blue */
border: 1px solid #efefef;
border-radius: 8px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04);
}
.timeline-card {
padding: 2.5rem 2rem;
/* Vertical dividers */
border-right: 1px solid #EAEFF8;
}
.timeline-card:last-child {
border-right: none;
}
/* Card titles (Mission, Vision, etc.) */
.timeline-card h4 {
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: #333;
margin-bottom: 1.5rem;
/* * NOTE: The mockup has icons. I have left space for them.
* If you add ![]()
tags for icons, you can remove
* the padding-top and adjust margin-bottom.
*/
padding-top: 3.5rem;
}
.timeline-card p {
font-size: 1rem;
line-height: 1.7;
color: #555;
/* Overrides global 'p' max-width */
max-width: none;
}
/* === Responsive for Timeline Section === */
@media (max-width: 992px) {
/* Stack main layout */
.about-timeline {
grid-template-columns: 1fr;
}
.timeline {
margin-bottom: 3rem;
}
/* Stack cards */
.timeline-cards {
grid-template-columns: 1fr;
}
.timeline-card {
border-right: none;
border-bottom: 1px solid #EAEFF8;
}
.timeline-card:last-child {
border-bottom: none;
}
}
@media (max-width: 576px) {
/* Simplify timeline on mobile */
.timeline {
grid-template-columns: 1fr;
gap: 2.5rem;
padding-top: 0;
}
/* Hide horizontal line */
.timeline::after {
display: none;
}
/* Hide dots */
.year::before {
display: none;
}
.year {
padding-top: 0;
}
/* Left-align all text */
.year,
.year:nth-child(2),
.year:nth-child(3) {
text-align: left;
}
.year p,
.year:nth-child(2) p,
.year:nth-child(3) p {
margin: 0;
}
}
/* ABOUT — Future CTA (refine) */
.about-future {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(5rem, 10vw, 9rem) 0;
background: #f6f7f9;
}
/* Content container (keeps hero full-bleed, text aligned nicely) */
.about-future .about-future__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(1.5rem, 4vw, 2.5rem);
display: grid;
align-items: center;
}
/* Use your existing ![]()
as the photo layer */
.future-bg-image {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
/* lighter blur, slight warmth */
filter: blur(4px) saturate(1.05);
opacity: .86;
}
/* Overlay for readability (dark at center, transparent to edges) */
.about-future::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg, rgba(12,18,28,0.35) 0%, rgba(12,18,28,0.18) 22%, rgba(12,18,28,0.08) 48%, rgba(12,18,28,0) 70%)
,radial-gradient(1200px 500px at 50% 30%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 100%);
pointer-events: none;
}
/* Soft bottom fade so it blends into the next section */
.about-future::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px; height: 56px;
background: linear-gradient(to bottom, rgba(246,247,249,0) 0%, rgba(246,247,249,1) 100%);
z-index: 0;
}
/* Eyebrow (optional—add a if you want) */
.about-future .eyebrow {
font: 600 .8rem/1.1 Inter, system-ui, sans-serif;
letter-spacing: .12em;
text-transform: uppercase;
color: #a9b1bc;
margin: 0 0 1rem;
}
/* Heading */
.about-future h2 {
font-family: "Fraunces", serif;
font-size: clamp(2.6rem, 5.5vw, 4.2rem);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.01em;
color: #0e1218;
max-width: 18ch;
margin: 0 0 1rem;
text-align: left;
}
/* Accent underline (premium, not loud) */
.about-future h2::after {
content: "";
display: block;
width: 180px;
height: 3px;
margin-top: 1rem;
background: linear-gradient(90deg, #133d8d 0%, #e60000 100%);
border-radius: 2px;
}
/* Copy */
.about-future p {
font-size: 1.3rem;
line-height: 1.85;
color: #fefefe;
max-width: 60ch;
margin: 1.25rem 0 2rem;
text-align: left;
}
/* Buttons block */
.about-future .about-buttons {
display: flex;
flex-wrap: wrap;
gap: .9rem;
justify-content: flex-start;
}
/* Slightly larger buttons for hero */
.about-future .cta-button {
padding: .95rem 1.35rem;
font-weight: 600;
}
/* Primary pops on the overlay */
.about-future .cta-primary {
box-shadow: 0 10px 28px rgba(16,24,40,.16);
}
/* Secondary in brand red, but refined */
.about-future .cta-secondary {
border-color: #e60000;
color: #e60000;
background: rgba(255,255,255,.92);
backdrop-filter: blur(4px);
}
.about-future .cta-secondary:hover {
background: #e60000;
color: #fff;
}
/* Mobile niceties */
@media (max-width: 880px) {
.about-future .about-future__inner {
max-width: 720px;
}
.about-future h2::after {
width: 72px;
height: 2px;
}
.about-future .about-buttons .cta-button {
width: 100%;
}
}
/* ======================================= */
/* ===== 1️⃣ LOCATIONS - HERO SECTION ===== */
/* ======================================= */
.locations-hero {
/* Warm beige gradient from the mockup */
background: #FFFFFF;
padding: clamp(2rem, 8vw, 6rem) 0;
overflow: hidden;
/* For layered pseudo-elements */
position: relative;
isolation: isolate;
}
.locations-hero::before {
content: "";
position: absolute;
top: -8rem;
left: -8rem;
width: 50vw;
height: 95vh;
/* darker + fewer lines */
background-image: repeating-linear-gradient(
135deg,
rgba(0, 84, 165, 0.08) 0px,
rgba(0, 84, 165, 0.08) 2px,
transparent 2px,
transparent 14px /* much bigger gap = fewer lines */
);
z-index: -2;
pointer-events: none;
}
.locations-hero::after {
content: "";
position: absolute;
top: -8rem;
left: -8rem;
width: 50vw;
height: 95vh;
background:
/* Fade RIGHT: starts early */
linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 35%,
#ffffff 100%
),
/* Fade BOTTOM stays smooth */
linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 70%,
#ffffff 100%
);
z-index: -1;
pointer-events: none;
}
.locations-hero-inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: 0.8fr 1.2fr; /* Content is narrower */
align-items: center;
gap: 3rem;
}
.locations-hero-content {
position: relative;
z-index: 2; /* ensures text always stays above image */
}
.locations-hero-content h1 {
margin-bottom: 1.5rem;
}
.locations-hero-content p {
font-size: 1.2rem;
line-height: 1.8;
color: #555;
max-width: 45ch;
}
.locations-hero-media {
transform: scale(1.3);
transform-origin: center;
z-index: 1; /* keeps it above background, below text */
position: relative;
}
.locations-hero-media img {
width: 100%;
height: auto;
display: block;
}
@keyframes locationsFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
}
/* ======================================= */
/* ===== MOBILE LOCATIONS HERO - FIX ===== */
/* ======================================= */
@media (max-width: 991px) {
.locations-hero {
/* Force full screen height */
height: 100dvh;
min-height: 700px;
/* Flex column to stack Text on Top, Image on Bottom */
display: flex;
flex-direction: column;
justify-content: flex-start;
/* Remove default padding and add specific top padding to clear logo */
padding: 140px 0 0 0;
overflow: hidden;
}
.locations-hero-inner {
/* Reset Grid to Block/Flex */
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
gap: 0;
}
/* === TEXT SECTION (TOP) === */
.locations-hero-content {
/* Center text */
text-align: center;
padding: 0 1.5rem;
width: 100%;
/* Ensure it sits nicely at the top */
flex-shrink: 0;
z-index: 10;
}
.locations-hero-content h1 {
font-size: 2.25rem;
line-height: 1.15;
margin-bottom: 1rem;
/* Prevent words from touching screen edges */
max-width: 100%;
}
.locations-hero-content p {
font-size: 1rem;
line-height: 1.6;
margin: 0 auto;
max-width: 90%; /* Keep text from hitting edges */
color: #555;
}
/* === IMAGE SECTION (BOTTOM) === */
.locations-hero-media {
/* Pushes the image to the bottom of the container */
margin-top: auto;
width: 100%;
position: relative;
/* Reset desktop transforms */
transform: none;
max-width: 100%;
/* Optional: Add a subtle fade-in animation */
animation: locationsFloat 6s ease-in-out infinite;
}
.locations-hero-media img {
width: 100%;
height: auto;
max-height: 45vh; /* Don't let it get too tall */
object-fit: contain;
object-position: bottom center;
/* Zoom it slightly to look more impressive */
transform: scale(1.1);
transform-origin: bottom center;
}
/* === BACKGROUND DECORATION FIX === */
/* Adjust the blue lines so they don't cover the text */
.locations-hero::before {
top: auto;
bottom: 0;
left: 0;
width: 100%;
height: 50%; /* Only show lines on bottom half */
opacity: 0.5;
}
.locations-hero::after {
display: none; /* Simplify background on mobile */
}
}
/* ========================================= */
/* ===== 2️⃣ LOCATIONS – OFFICES SECTION ===== */
/* ========================================= */
.locations-offices {
/* 3D isometric tessellated background */
--sz: 60px; /* tile size */
--c1: #f4f5f7; /* top face (light) */
--c2: #e0e2e6; /* side face 1 */
--c3: #caced3; /* side face 2 */
--c4: #b4b7bd; /* depth/shadow */
--ts: 50% / calc(var(--sz) * 10.5) calc(var(--sz) * 12.2);
background:
conic-gradient(from 180deg at 100% 83.335%, var(--c3) 0 60deg, #0000 0 360deg) var(--ts),
conic-gradient(from 120deg at 66.66% 66.66%, var(--c1) 0 120deg, #0000 0 360deg) var(--ts),
conic-gradient(from 60deg at 66.66% 33.33%, var(--c2) 0 60deg, var(--c4) 0 120deg, #0000 0 360deg) var(--ts),
conic-gradient(from -60deg at 33% 16.665%, var(--c1) 0 120deg, var(--c3) 0 240deg, var(--c4) 0 360deg) var(--ts),
var(--c2);
background-attachment: fixed; /* subtle parallax; remove if you don't want it */
padding: clamp(4rem, 8vw, 6rem) 0;
border-top: 1px solid #E2E4EA;
padding-bottom: clamp(6rem, 10vw, 8rem); /* NEW stronger bottom spacing */
}
/* Make sure old decorative layers are neutralized */
.locations-offices::before,
.locations-offices::after {
content: none;
}
.locations-offices-inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
/* NEW: content above waves & grid */
position: relative;
z-index: 1;
}
.offices-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
}
.office-card {
background-color: #ffffff;
border: 1px solid #EAEFF8;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
overflow: hidden; /* To contain the image border radius */
display: flex;
flex-direction: column;
}
.office-card-image img {
width: 100%;
height: 250px;
object-fit: cover;
display: block;
}
.office-card-body {
padding: 2rem;
display: flex;
flex-direction: column;
flex-grow: 1; /* Makes card bodies equal height */
}
.office-card-body h3 {
/* Uses global h3 style */
font-size: 1.8rem;
margin-bottom: 0.5rem;
}
.office-role {
font-family: 'Inter', sans-serif;
font-size: 1rem;
color: #555;
margin-bottom: 1.5rem;
font-weight: 500;
}
.office-address {
font-family: 'Inter', sans-serif;
font-size: 1rem;
color: #333;
line-height: 1.6;
margin-bottom: 2rem;
}
.office-cta {
/* Override global button margin */
margin-top: auto; /* Pushes button to the bottom */
width: 100%;
text-align: center;
}
/* ======================================= */
/* ===== LOCATIONS - CARD HOVER EFFECT ===== */
/* ======================================= */
/* 1. Add transition to the card for a smooth "lift" */
.office-card {
/* This transition will smooth the shadow and lift */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* 2. Prepare the image container and image */
.office-card-image {
/* This clips the image as it zooms */
overflow: hidden;
}
.office-card-image img {
/* This transition will smooth the zoom */
transition: transform 0.4s ease;
}
/* 3. Define the hover state */
.office-card:hover {
/* Lifts the card up slightly */
transform: translateY(-5px);
/* Makes the shadow a bit stronger for depth */
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
}
.office-card:hover .office-card-image img {
/* Zooms the image inside its container */
transform: scale(1.05);
}
/* ============================ */
/* ===== OFFICE SECTION TEXT === */
/* ============================ */
.locations-offices-header {
text-align: center;
margin-bottom: 4rem;
max-width: 800px;
margin-inline: auto;
}
.locations-offices-header .section-eyebrow {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #555;
margin-bottom: 0.75rem;
}
.locations-offices-header h2 {
font-family: 'Fraunces', serif;
font-size: 2.8rem;
font-weight: 600;
color: #1f1f1f;
margin-bottom: 1rem;
}
.locations-offices-header p {
font-size: 1.15rem;
line-height: 1.75;
color: #555;
margin: 0 auto;
}
/* ========================================= */
/* ===== 3️⃣ LOCATIONS - MAP SECTION ===== */
/* ========================================= */
/* ===== LOCATIONS – MAP SECTION ===== */
.locations-map-section {
background: linear-gradient(135deg, #f8f9fb 0%, #eef0f4 40%, #f8f9fb 100%);
border-top: 1px solid #E2E4EA;
padding: clamp(4rem, 8vw, 6rem) 0;
border-bottom: 5px solid #1F3A60; /* ✔ keep this */
/* for pattern layering */
position: relative;
overflow: hidden;
isolation: isolate;
}
/* dot grid pattern – larger & more visible */
.locations-map-section::before {
content: "";
position: absolute;
top: 2.5rem;
left: 0;
width: 70vw; /* was 48vw → extends further right */
height: 95%; /* covers almost whole section */
background-image:
radial-gradient(circle, rgba(0, 84, 165, 0.14) 1px, transparent 1px);
/* a bit closer dots for stronger read, but not too busy */
background-size: 20px 20px;
z-index: 0;
pointer-events: none;
}
/* fade the pattern on the right & at the bottom */
.locations-map-section::after {
content: "";
position: absolute;
top: 2.5rem;
left: 0;
width: 70vw;
height: 95%;
background:
/* fade horizontally – pattern still under some of the map but very soft */
linear-gradient(
to right,
rgba(238, 240, 244, 0) 0%,
rgba(238, 240, 244, 0) 55%, /* more pattern visible across section */
rgba(238, 240, 244, 1) 100%
),
/* fade vertically */
linear-gradient(
to bottom,
rgba(248, 249, 251, 0) 0%,
rgba(248, 249, 251, 0) 65%,
rgba(248, 249, 251, 1) 100%
);
z-index: 1;
pointer-events: none;
}
/* ensure content stays over pattern */
.locations-map-inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 4rem;
position: relative;
z-index: 2; /* important */
}
.locations-map-content {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
}
/* small, techy label above the headline */
.locations-map-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: #999;
margin-bottom: 0.75rem;
}
/* BIG, confident headline */
.locations-map-content h2 {
font-family: 'Fraunces', serif;
font-size: clamp(2.6rem, 4vw, 3.4rem);
font-weight: 600;
color: #111;
line-height: 1.15;
margin-bottom: 1.25rem;
text-transform: none;
letter-spacing: -0.03em;
}
/* main paragraph */
.locations-map-content p {
font-family: 'Inter', sans-serif;
font-size: 1.1rem;
line-height: 1.9;
color: #555;
max-width: 50ch;
margin-bottom: 1rem;
}
/* secondary line, slightly lighter */
.locations-map-meta {
font-size: 0.95rem;
color: #555;
max-width: 52ch;
}
/* optional accent line under the heading for that “tech” feel */
.locations-map-content h2::after {
content: "";
display: block;
width: 320px;
height: 3px;
margin-top: 1.2rem;
background: linear-gradient(90deg, #003399, #00b4ff);
border-radius: 999px;
opacity: 0.7;
}
/* NEW STYLES FOR MAP */
.map-frame {
width: 120%;
height: 600px; /* Fixed height for consistency */
border-radius: 24px; /* Matches your card design */
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
background-color: #eee; /* Placeholder color while loading */
transform: translateX(-7.5vw); /* subtle and scales with screen width */
}
.map-frame iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* OPTIONAL: Adjust for smaller screens */
@media (max-width: 768px) {
.map-frame {
height: 350px;
}
}
/* ========================================= */
/* ===== 4️⃣ LOCATIONS - FINAL CTA SECTION ===== */
/* ========================================= */
.locations-cta {
background-color: #ffffff;
/* smaller vertical height */
padding: clamp(2.5rem, 5vw, 3.5rem) 0;
position: relative;
overflow: hidden;
isolation: isolate;
}
/* content stays above pattern */
.locations-cta-inner {
max-width: 1550px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: 1.25fr 1fr; /* left = image, right = text */
align-items: center;
gap: 4rem;
position: relative;
z-index: 1;
}
/* TOP-RIGHT BLUEPRINT DOT PATTERN */
.locations-cta::before {
content: "";
position: absolute;
top: -8rem;
right: -6rem;
width: 52vw;
height: 120%;
/* Bolder blueprint dot pattern */
background-image: radial-gradient(
circle,
rgba(0, 84, 165, 0.22) 2px, /* larger + stronger dots */
transparent 1px
);
background-size: 22px 22px;
z-index: -2;
pointer-events: none;
}
/* Fade dots toward LEFT + BOTTOM */
.locations-cta::after {
content: "";
position: absolute;
top: -8rem;
right: -6rem;
width: 52vw;
height: 120%;
background:
/* fade horizontally (right → left) */
linear-gradient(
to left,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0) 45%,
#ffffff 100%
),
/* fade vertically (top → bottom) */
linear-gradient(
to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0) 60%,
#ffffff 100%
);
z-index: -1;
pointer-events: none;
}
/* LEFT: image column */
.locations-cta-image {
display: flex;
justify-content: center;
align-items: center;
}
.locations-cta-image img {
width: 100%;
max-width: 800px; /* control size inside column */
height: auto;
object-fit: contain;
}
/* RIGHT: text + buttons (your old styles) */
.locations-cta-text h2 {
font-family: 'Fraunces', serif;
font-size: 2.5rem;
font-weight: 600;
color: #1f1f1f;
text-transform: none;
letter-spacing: normal;
}
.locations-cta-text p {
font-size: 1.1rem;
color: #555;
max-width: 45ch;
margin-top: 1rem;
}
.locations-cta-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 2rem;
}
.locations-cta-buttons .cta-button {
width: 80%;
text-align: center;
margin-top: 0;
}
/* ======================================= */
/* ===== RESPONSIVE STYLES ===== */
/* ======================================= */
@media (max-width: 992px) {
/* --- Hero --- */
.locations-hero-inner {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.locations-hero-content {
text-align: center;
}
.locations-hero-content p {
margin: 0 auto;
}
/* --- Offices --- */
.offices-grid {
grid-template-columns: 1fr;
max-width: 500px;
margin: 0 auto;
gap: 2.5rem;
}
/* --- Map --- */
.locations-map-inner {
grid-template-columns: 1fr;
text-align: center;
gap: 3rem;
}
.locations-map-visual {
/* Move map to top on mobile */
grid-row: 1;
}
.locations-map-content p {
margin: 0 auto;
}
/* --- Final CTA --- */
.locations-cta-inner {
grid-template-columns: 1fr;
}
.locations-cta-image {
order: -1; /* image first on mobile */
}
.locations-cta-buttons {
align-items: stretch;
}
}
@media (max-width: 576px) {
.office-card-image img {
height: 200px; /* Shorter image on mobile */
}
/* Stack CTA buttons on small phones */
.locations-cta-buttons {
flex-direction: column;
}
.locations-cta-buttons .cta-button {
width: 100%; /* Back to full width */
max-width: 400px;
}
}
/* ======================================= */
/* ===== 1️⃣ CONTACT - HERO SECTION ===== */
/* ======================================= */
.contact-hero {
width: 100%;
min-height: 100vh;
background-color: #ffffff;
position: relative;
z-index: 5;
overflow: hidden;
}
.contact-hero-inner {
display: grid;
grid-template-columns: 1fr 1fr; /* give image more width */
align-items: center;
width: 100%;
height: 100%;
overflow: visible;
}
/* Text side */
.contact-hero-content {
height: 100%;
padding: clamp(3rem, 8vw, 6rem) clamp(2rem, 10vw, 8rem);
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
isolation: isolate;
}
.contact-hero-content::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
/* Subtle dual fade: stronger on right, gentle at bottom */
background-image:
linear-gradient(
to bottom right,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.35) 50%,
rgba(255,255,255,0.9) 95%,
rgba(255,255,255,1) 100%
),
linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
background-size:
100% 100%,
30px 30px,
30px 30px;
background-repeat: no-repeat, repeat, repeat;
}
.contact-hero-content h1 {
margin-bottom: 1.5rem;
}
.contact-hero-content p {
font-size: 1.25rem;
line-height: 1.8;
color: #555;
max-width: 50ch;
margin-bottom: 2.5rem;
}
.contact-hero-actions {
display: flex;
gap: 1rem;
align-items: center;
}
.contact-hero-actions .cta-button {
margin-top: 0;
}
/* Image side */
.contact-hero-image {
width: 100%;
height: 140%;
overflow: hidden;
mask-image:
linear-gradient(to bottom, transparent 0%, black 25%, black 80%, transparent 100%),
linear-gradient(to right, transparent 0%, black 20%, black 100%);
-webkit-mask-image:
linear-gradient(to bottom, transparent 0%, black 25%, black 80%, transparent 100%),
linear-gradient(to right, transparent 0%, black 20%, black 100%);
mask-composite: intersect;
-webkit-mask-composite: destination-in;
}
.contact-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0.9;
filter: brightness(1.05);
}
/* ======================================= */
/* ===== CONTACT HERO - MOBILE FIX ===== */
/* ======================================= */
@media (max-width: 991px) {
.contact-hero {
display: block;
height: auto;
min-height: 100dvh;
/* Add padding top to clear the logo area completely */
padding-top: 140px;
}
.contact-hero-inner {
display: flex;
flex-direction: column;
height: 100%;
}
/* === TEXT SECTION (TOP) === */
.contact-hero-content {
order: 1; /* Text First */
width: 100%;
/* Reset desktop padding */
padding: 0 1.5rem;
/* CENTER EVERYTHING */
text-align: center;
align-items: center;
margin-bottom: 2rem;
}
.contact-hero-content h1 {
font-size: 2.5rem;
line-height: 1.1;
margin-bottom: 1rem;
}
.contact-hero-content p {
font-size: 1.1rem;
margin-left: auto; /* Centers the paragraph block */
margin-right: auto;
max-width: 100%;
margin-bottom: 2rem;
}
.contact-hero-actions {
justify-content: center;
width: 100%;
flex-direction: column; /* Stack buttons on mobile */
gap: 1rem;
}
.contact-hero-actions .cta-button {
width: 100%;
text-align: center;
}
/* === IMAGE SECTION (BOTTOM) === */
.contact-hero-image {
order: 2; /* Image Second */
width: 100%;
height: 45vh; /* Takes up the bottom half of screen */
margin-top: auto; /* Pushes it to the very bottom */
/* Simplified mask for mobile: Fades the TOP edge only */
mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 100%);
}
.contact-hero-image img {
width: 100%;
height: 100%;
object-fit: contain; /* Ensure the whole building illustration is seen */
object-position: bottom center; /* Anchors it to the bottom */
/* Move it down slightly if you want it lower */
transform: translateY(10px);
}
/* Remove the background decoration lines on mobile to keep it clean */
.contact-hero-content::before {
display: none;
}
}
/* ======================================= */
/* ===== 2️⃣ CONTACT - MAIN SECTION ===== */
/* ======================================= */
.contact-main {
position: relative;
z-index: 1;
overflow: hidden;
/* spacing hero → intro → card */
padding: clamp(2.5rem, 5vh, 4rem) clamp(1.5rem, 5vw, 3rem) 5.5rem;
/* remove old gradient */
background: #f5f7ff; /* fallback color in case image fails */
}
.contact-main-inner {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2; /* above the image */
}
/* Background image container */
.contact-main-bg {
position: absolute;
inset: 0;
z-index: 1; /* behind the content but above section background */
pointer-events: none;
}
.contact-main-bg::after {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
z-index: 2;
}
/* Background image styling */
.contact-main-bg img {
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(26px) brightness(1.05);
transform: scale(1.06); /* avoids visible edges after blur */
opacity: 0.55; /* tweak to taste */
}
/* --- Main Contact Card --- */
.contact-card {
background-color: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.06);
border-radius: 20px;
box-shadow: 0 28px 80px rgba(15, 23, 42, 0.12);
position: relative;
z-index: 10;
/* ❌ remove the negative margin so it stops covering .contact-intro */
overflow: hidden;
}
/* Soft brand-colored glow strip at the very top */
.contact-card::before {
content: "";
position: absolute;
inset: 0;
top: 0;
height: 8px;
background: linear-gradient(90deg, #184a8c, #2563eb);
opacity: 0.22;
pointer-events: none;
}
/* --- Card Top: Office Info --- */
.contact-card-top {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
padding: 2.75rem 3rem;
}
.contact-label {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #9ca3af;
margin-bottom: 0.4rem;
}
.contact-highlight {
font-family: 'Fraunces', serif;
font-size: 1.35rem;
font-weight: 600;
color: #1f1f1f;
margin-bottom: 0.3rem;
}
.contact-meta {
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
color: #6b7280;
line-height: 1.6;
max-width: none; /* Override global p */
}
/* --- Card Divider --- */
.contact-card-divider {
border: 0;
height: 1px;
background-color: #EAEFF8;
margin: 0 3rem;
}
/* --- Card Form --- */
.contact-form {
padding: 3rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.form-field {
display: flex;
flex-direction: column;
}
/* Spans the full width */
.form-field-full {
grid-column: 1 / -1;
}
.form-field label {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 0.9rem;
color: #333;
margin-bottom: 0.5rem;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea {
width: 100%;
padding: 1rem;
font-family: 'Inter', sans-serif;
font-size: 1rem;
color: #1f1f1f;
border: 1px solid #DDE2E8;
border-radius: 6px;
transition: border-color 0.3s, box-shadow 0.3s;
}
.form-field input[type="text"]:focus,
.form-field input[type="email"]:focus,
.form-field input[type="tel"]:focus,
.form-field textarea:focus {
outline: none;
border-color: #254993;
box-shadow: 0 0 0 3px rgba(37, 73, 147, 0.1);
}
.form-field textarea {
resize: vertical;
min-height: 120px;
}
/* Helper class from your HTML */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* --- Card Bottom: Collaborate --- */
.contact-card-bottom {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 2.5rem;
padding: 2.5rem 3rem;
background: linear-gradient(to right, #f3f6ff 0%, #f9fbff 60%, #f3f6ff 100%);
border-top: 1px solid rgba(148, 163, 184, 0.4);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.contact-bottom-text h3 {
font-family: 'Fraunces', serif;
font-size: 1.4rem;
font-weight: 600;
color: #1f1f1f;
margin-bottom: 0.5rem;
}
.contact-bottom-text p {
font-size: 0.95rem;
color: #6b7280;
line-height: 1.6;
max-width: 40ch;
}
.contact-bottom-actions {
display: flex;
gap: 0.75rem;
justify-content: flex-end;
}
.contact-bottom-actions .cta-button {
margin-top: 0;
}
/* ======================================= */
/* ===== 3️⃣ CONTACT - RESPONSIVE ===== */
/* ======================================= */
@media (max-width: 992px) {
/* --- Hero --- */
.contact-hero {
grid-template-columns: 1fr;
min-height: 0;
}
.contact-hero-image {
grid-row: 1;
height: 400px;
}
.contact-hero-content {
grid-row: 2;
padding: 4rem 2rem;
text-align: center;
}
.contact-hero-actions {
justify-content: center;
}
/* --- Main Card --- */
.contact-main {
padding-top: 6rem; /* Adjust for smaller overlap */
}
/* --- Card Top --- */
.contact-card-top {
grid-template-columns: 1fr;
gap: 2rem;
}
/* --- Card Bottom --- */
.contact-card-bottom {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.contact-bottom-text p {
margin: 0 auto;
}
.contact-bottom-actions {
justify-content: center;
}
}
@media (max-width: 576px) {
/* --- Form --- */
.form-row {
grid-template-columns: 1fr;
margin-bottom: 0;
}
.form-field {
margin-bottom: 1.5rem; /* Stacked fields have margin */
}
/* --- Card Top/Bottom --- */
.contact-card-top,
.contact-form,
.contact-card-bottom {
padding: 2rem 1.5rem;
}
.contact-card-divider {
margin: 0 1.5rem;
}
/* --- Buttons --- */
.contact-bottom-actions {
flex-direction: column;
}
.contact-bottom-actions .cta-button {
width: 100%;
text-align: center;
}
}
.contact-intro {
text-align: center;
padding: 5rem 0; /* equal top & bottom breathing room */
}
.contact-intro h2 {
font-family: 'Fraunces', serif;
font-weight: 600;
font-size: clamp(2.8rem, 4vw, 3.6rem);
line-height: 1.15;
color: #1f1f1f;
margin-bottom: 1rem;
text-align: center;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.contact-intro p {
font-family: 'Inter', sans-serif;
font-size: clamp(1.1rem, 1.6vw, 1.25rem);
color: #444;
max-width: 60ch;
margin: 0 auto;
line-height: 1.75;
}
#iso-certifications,
#network-galati,
#our-journey {
scroll-margin-top: 120px;
}
.btn-extern-magazin {
position: absolute;
/* 12vw îl va ține proporțional la stânga zonei de Contact */
right: 18vw;
top: 50%;
transform: translateY(-50%);
z-index: 10;
/* OPTIONAL: Ajustăm și padding-ul și fontul în unități dinamice
pentru a nu părea uriaș pe ecrane mici sau minuscul pe 4K */
padding: 1vw 1.6vw;
font-size: clamp(9px, 0.7vw, 11px);
/* Păstrezi restul proprietăților tale de background și font neschimbate */
display: inline-flex;
align-items: center;
background: linear-gradient(rgba(37, 73, 147, 0.2), rgba(37, 73, 147, 0.8)),
url('pixelcut-export copy.png');
background-size: cover;
background-position: center;
color: #ffffff !important;
text-decoration: none;
font-family: 'Inter', sans-serif;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
white-space: nowrap;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.btn-extern-magazin:hover {
transform: translateY(-52%); /* Păstrează centrarea verticală + mic salt */
filter: brightness(1.1);
box-shadow: 0 6px 18px rgba(37, 73, 147, 0.7);
}
/* Ascundem butonul pe mobile pentru a nu se suprapune peste logo */
@media (max-width: 1100px) {
.btn-extern-magazin {
display: none;
}
}