/* ============================================================
RED PRO — Shared Stylesheet
============================================================ */
:root {
--primary: #E63232;
--primary-dark: #C42424;
--secondary: #1D3557;
--accent: #F4A261;
--bg-light: #FFFFFF;
--bg-section: #FAFAFA;
--bg-dark: #0A1628;
--text-dark: #0F1115;
--text-light: #FFFFFF;
--text-muted: #6B7280;
--border: #E5E7EB;
--shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
--shadow-md: 0 2px 12px rgba(0,0,0,0.06);
--shadow-lg: 0 12px 30px rgba(0,0,0,0.12);
--radius: 10px;
--radius-lg: 16px;
--nav-h: 70px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
color: var(--text-dark);
background: var(--bg-light);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.6;
}
.serif { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; }
/* ============ FOCUS STYLES (a11y) ============ */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
outline: 3px solid var(--primary);
outline-offset: 2px;
border-radius: 4px;
}
/* ============ NAVIGATION ============ */
nav.site-nav {
position: fixed;
top: 0;
width: 100%;
height: var(--nav-h);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px;
background: rgba(10, 22, 40, 0.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 9999;
color: var(--text-light);
transition: transform 0.35s ease, background 0.3s ease;
}
nav.site-nav.nav-hidden { transform: translateY(-100%); }
nav.site-nav .logo-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-light); }
nav.site-nav .logo-svg { height: 40px; width: auto; display: block; }
nav.site-nav img.logo-svg { height: 40px; width: auto; object-fit: contain; }
.footer-logo-wrap img { height: 52px; width: auto; display: block; }
nav.site-nav .logo-text { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 600; letter-spacing: 0; color: var(--text-light); white-space: nowrap; }
nav.site-nav .logo-text span { color: var(--primary); }
nav.site-nav .nav-links { display: flex; gap: 36px; list-style: none; align-items: center; }
nav.site-nav .nav-links a { color: var(--text-light); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.3s; position: relative; }
nav.site-nav .nav-links a:hover,
nav.site-nav .nav-links a[aria-current="page"] { color: var(--primary); }
nav.site-nav .nav-links a[aria-current="page"]::after {
content: ''; position: absolute; bottom: -8px; left: 0; right: 0;
height: 2px; background: var(--primary); border-radius: 2px;
}
nav.site-nav .lang-toggle {
background: rgba(230,57,70,0.2);
border: 1px solid var(--primary);
color: var(--text-light);
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
font-weight: 700;
transition: all 0.3s;
font-family: inherit;
}
nav.site-nav .lang-toggle:hover { background: var(--primary); }
nav.site-nav .nav-toggle-btn {
display: none;
background: transparent;
border: 0;
width: 36px; height: 36px;
color: white;
cursor: pointer;
padding: 6px;
}
nav.site-nav .nav-toggle-btn svg { width: 100%; height: 100%; }
/* ============ SCROLL PROGRESS BAR ============ */
.scroll-progress {
position: fixed;
top: 0; left: 0;
width: 0%;
height: 3px;
background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
z-index: 10000;
transition: width 0.1s linear;
pointer-events: none;
}
/* ============ PAGE HEADER (non-hero pages) ============ */
.page-header {
background: linear-gradient(135deg, var(--secondary) 0%, var(--bg-dark) 100%);
color: var(--text-light);
padding: calc(var(--nav-h) + 80px) 40px 100px;
text-align: center;
position: relative;
overflow: hidden;
}
.page-header::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(230,57,70,0.15) 0%, transparent 60%);
}
.page-header-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.page-header .eyebrow { color: var(--primary); font-size: 13px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 16px; }
.page-header h1 { font-size: clamp(36px, 5.5vw, 64px); font-weight: 900; letter-spacing: -2px; line-height: 1.1; margin-bottom: 20px; }
.page-header p { font-size: clamp(16px, 2vw, 20px); color: #C9D2DF; max-width: 640px; margin: 0 auto; }
/* ============ SECTIONS ============ */
section {
position: relative;
background: var(--bg-light);
padding: 100px 40px;
}
section.alt-bg { background: var(--bg-section); }
section h2 {
font-size: clamp(30px, 4.5vw, 48px);
font-weight: 900;
margin-bottom: 24px;
color: var(--text-dark);
text-align: center;
letter-spacing: -1px;
line-height: 1.1;
}
section h2 .accent { color: var(--primary); }
section .section-subtitle {
text-align: center;
max-width: 680px;
margin: 0 auto 60px;
color: var(--text-muted);
font-size: 17px;
}
section h3 { font-size: 22px; font-weight: 700; color: var(--secondary); margin-bottom: 16px; }
section p { line-height: 1.7; color: #4B5563; font-size: 16px; }
.container { max-width: 1200px; margin: 0 auto; }
/* ============ HERO SCROLL SYSTEM ============ */
.hero-container {
position: relative;
width: 100%;
height: 500vh;
margin-bottom: -100vh;
}
.hero-viewport {
position: sticky;
top: 0;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 100;
}
.hero-back {
position: absolute;
left: 0; top: -30%;
width: 100%; height: 160%;
background:
radial-gradient(ellipse 90% 60% at 50% 100%, rgba(255,140,95,0.9) 0%, rgba(255,175,125,0.6) 25%, transparent 55%),
radial-gradient(ellipse 70% 35% at 70% 75%, rgba(255,210,180,0.55) 0%, transparent 65%),
radial-gradient(ellipse 60% 30% at 25% 70%, rgba(255,195,165,0.5) 0%, transparent 65%),
linear-gradient(180deg, #2E4F7A 0%, #5A7AA8 12%, #8AA7C6 24%, #C2C8D8 38%, #E6CFC2 52%, #F5C9A8 64%, #F7B085 76%, #EE8A66 88%, #D86A4E 100%);
z-index: 0;
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
}
.hero-haze {
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 55%;
background: linear-gradient(180deg, transparent 0%, rgba(255,195,155,0.15) 40%, rgba(255,170,130,0.35) 70%, rgba(255,150,110,0.5) 100%);
z-index: 0;
pointer-events: none;
will-change: opacity, transform;
}
.hero-back-white { position: absolute; inset: 0; background: #fff; z-index: 0; opacity: 0; will-change: opacity; }
.hero-house {
position: absolute; inset: 0;
background-image: url('hero-building-day.png');
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
z-index: 2;
will-change: transform, opacity, filter;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
}
.hero-house.fallback { background-image: url('https://images.unsplash.com/photo-1545365416-6387b7a5e58f?w=1920&h=1080&fit=crop'); }
/* Building FRAME — same image as .hero-house but with lit windows cut transparent.
Sits in FRONT of the silhouettes so people appear INSIDE the windows.
JS mirrors .hero-house transform/opacity onto this layer so they move together. */
.hero-frame {
position: absolute; inset: 0;
background-image: url('hero-building-frame.png');
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
z-index: 7; /* above silhouettes (z:6) so people appear INSIDE windows */
will-change: transform, opacity, filter;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
pointer-events: none;
}
/* ============ HERO SILHOUETTES — people working in the lit windows ============
Dark figures positioned over the building's window zone. They move subtly to
suggest life inside. Fade out with the hero content on scroll. */
.hero-silhouettes {
position: absolute;
top: 18%;
left: 50%;
transform: translateX(-50%);
width: min(56vw, 680px);
height: 52%;
z-index: 6; /* above video (z:5) so silhouettes show on top */
pointer-events: none;
will-change: opacity;
}
.silhouette {
position: absolute;
width: 6px;
height: 16px;
background: rgba(5, 8, 14, 0.78);
border-radius: 3px 3px 1px 1px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
will-change: transform;
filter: blur(0.3px);
}
.silhouette::before {
content: '';
position: absolute;
top: -5px; left: 50%;
transform: translateX(-50%);
width: 4.5px; height: 4.5px;
background: rgba(5, 8, 14, 0.82);
border-radius: 50%;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}
/* Row 1 — top floor (small interior zone ~12-22% of container height) */
.sx-1 { top: 12%; left: 22%; animation: walk-a 18s infinite ease-in-out; }
.sx-2 { top: 14%; left: 68%; animation: walk-b 22s infinite ease-in-out; animation-delay: -4s; }
/* Row 2 — upper middle */
.sx-3 { top: 30%; left: 14%; animation: walk-a 24s infinite ease-in-out; animation-delay: -6s; }
.sx-4 { top: 32%; left: 46%; animation: walk-b 20s infinite ease-in-out; animation-delay: -11s; }
.sx-5 { top: 29%; left: 78%; animation: walk-a 26s infinite ease-in-out; animation-delay: -2s; }
/* Row 3 — middle */
.sx-6 { top: 48%; left: 28%; animation: walk-b 19s infinite ease-in-out; animation-delay: -7s; }
.sx-7 { top: 50%; left: 64%; animation: walk-a 23s infinite ease-in-out; animation-delay: -13s; }
/* Row 4 — lower middle */
.sx-8 { top: 66%; left: 18%; animation: walk-a 25s infinite ease-in-out; animation-delay: -3s; }
.sx-9 { top: 68%; left: 56%; animation: walk-b 21s infinite ease-in-out; animation-delay: -9s; }
/* Row 5 — lowest visible floor */
.sx-10 { top: 82%; left: 36%; animation: walk-b 27s infinite ease-in-out; animation-delay: -5s; }
.sx-11 { top: 84%; left: 72%; animation: walk-a 20s infinite ease-in-out; animation-delay: -14s; }
@keyframes walk-a {
0% { transform: translateX(0) scaleX(1); }
45% { transform: translateX(38px) scaleX(1); }
50% { transform: translateX(38px) scaleX(-1); }
95% { transform: translateX(0) scaleX(-1); }
100% { transform: translateX(0) scaleX(1); }
}
@keyframes walk-b {
0% { transform: translateX(0) scaleX(-1); }
40% { transform: translateX(-32px) scaleX(-1); }
45% { transform: translateX(-32px) scaleX(1); }
90% { transform: translateX(0) scaleX(1); }
100% { transform: translateX(0) scaleX(-1); }
}
@media (max-width: 900px) {
.hero-silhouettes { width: 70vw; height: 45%; top: 22%; }
.silhouette { width: 4.5px; height: 11px; }
.silhouette::before { width: 3.2px; height: 3.2px; top: -3.5px; }
}
/* Glass building placeholder — DISABLED until user delivers the Revit-style video/image.
When the video loads it takes over this layer's spot. Until then this element stays invisible
and phase 4 just shows a clean white canvas with the logo mark emerging. */
.hero-composite {
position: absolute; inset: 0;
background-color: #FFFFFF;
z-index: 2;
opacity: 0 !important;
pointer-events: none;
display: none !important; /* hard-disable until replacement content exists */
}
/* Scroll-scrubbed video — hidden by default so its empty white background can't
paint over the CSS parallax sunset if the video fails to load (file:// blocks, etc).
Only shows when JS confirms the video loaded successfully and adds .loaded. */
.hero-video {
position: absolute; inset: 0;
z-index: 5;
width: 100%; height: 100%;
object-fit: cover;
object-position: center center;
background: transparent;
opacity: 0;
pointer-events: none;
will-change: opacity;
}
.hero-video.loaded { opacity: 1; }
/* Cloud transition — full-viewport white wash that fades in during the final portion of
the scroll. Covers the ENTIRE viewport (not just the bottom) so the hero never peeks
through at the top during handoff to the next section. */
.hero-cloud-transition {
position: absolute;
left: -10%; right: -10%;
top: -15%;
bottom: -25%; /* extends beyond viewport edges */
z-index: 12; /* above scrim (z-9), above content (z-10), everything else in hero */
pointer-events: none;
opacity: 0;
will-change: opacity;
background:
/* Full white wash — stronger at bottom, still solid at top */
linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.95) 25%, rgba(255,255,255,1) 55%, rgba(255,255,255,1) 100%),
/* Cloud shapes for texture */
radial-gradient(ellipse 60% 40% at 22% 25%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.5) 45%, transparent 80%),
radial-gradient(ellipse 65% 40% at 78% 30%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 45%, transparent 80%),
radial-gradient(ellipse 55% 35% at 50% 60%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.5) 45%, transparent 82%);
filter: blur(8px);
transform: translate3d(0,0,0);
backface-visibility: hidden;
}
/* Video and CSS parallax now COEXIST.
- Parallax runs always (z-index 0–7), giving the sunset + building + clouds baseline
- Video sits on top (z-index 5) when .loaded class is present, covering the parallax frame-by-frame
- If video fails (file:// blocks, network error, unsupported codec), parallax is still there
No more either/or — no more white screen. */
/* Dark readability scrim behind hero content — ALWAYS active so white text reads
on any frame (video OR parallax fallback). JS fades it out as content fades out. */
.hero-scrim {
position: absolute; inset: 0;
z-index: 9;
pointer-events: none;
background:
radial-gradient(ellipse 85% 70% at 50% 50%, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0.20) 70%, transparent 95%),
linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.45) 100%);
opacity: 1; /* visible by default; JS fades it with content */
will-change: opacity;
}
.hero-content h1,
.hero-content p {
text-shadow: 0 2px 30px rgba(0,0,0,0.9), 0 4px 12px rgba(0,0,0,0.6), 0 0 20px rgba(0,0,0,0.5);
}
.hero-content p { opacity: 1; }
.hero-cta {
box-shadow: 0 12px 32px rgba(230,50,50,0.55), 0 4px 12px rgba(0,0,0,0.4);
}
/* Conduit overlay — PERMANENTLY KILLED. Element kept in DOM only for JS compatibility. */
.hero-conduit {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.hero-glow {
position: absolute; inset: 0;
z-index: 3;
opacity: 0;
background: radial-gradient(ellipse at center 60%, rgba(244,162,97,0.2) 0%, rgba(230,57,70,0.08) 40%, transparent 70%);
pointer-events: none;
}
.hero-white-reveal {
position: absolute; inset: 0;
z-index: 4;
background: white;
opacity: 0;
pointer-events: none;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 400'%3E%3Crect width='900' height='400' fill='white'/%3E%3Ctext x='450' y='260' text-anchor='middle' font-family='Playfair Display,Georgia,serif' font-size='320' font-weight='700' fill='black'%3ER%3C/text%3E%3Ctext x='450' y='340' text-anchor='middle' font-family='Playfair Display,Georgia,serif' font-size='68' font-weight='600' fill='black' letter-spacing='14'%3EPRO%3C/text%3E%3C/svg%3E");
-webkit-mask-size: min(70vw, 720px) auto;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-composite: xor;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 400'%3E%3Crect width='900' height='400' fill='white'/%3E%3Ctext x='450' y='260' text-anchor='middle' font-family='Playfair Display,Georgia,serif' font-size='320' font-weight='700' fill='black'%3ER%3C/text%3E%3Ctext x='450' y='340' text-anchor='middle' font-family='Playfair Display,Georgia,serif' font-size='68' font-weight='600' fill='black' letter-spacing='14'%3EPRO%3C/text%3E%3C/svg%3E");
mask-size: min(70vw, 720px) auto;
mask-position: center;
mask-repeat: no-repeat;
mask-composite: exclude;
}
.hero-skyline {
position: absolute;
left: -5%; right: -5%;
bottom: 18%;
height: 22%;
z-index: 1;
background: linear-gradient(180deg, transparent 0%, transparent 45%, rgba(200,120,95,0.55) 46%, rgba(170,95,75,0.7) 100%);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
opacity: 0.85;
will-change: transform, opacity;
filter: blur(1.5px);
}
.mid-cloud-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.mid-cloud { position: absolute; border-radius: 50%; will-change: transform, opacity; transform: translate3d(0,0,0); backface-visibility: hidden; }
.mc-1 { width: 700px; height: 200px; top: 35%; left: -10%; background: radial-gradient(ellipse at center, rgba(255,240,225,0.85) 0%, rgba(255,220,200,0.5) 40%, transparent 75%); filter: blur(28px); }
.mc-2 { width: 580px; height: 180px; top: 42%; right: -8%; background: radial-gradient(ellipse at center, rgba(255,235,215,0.8) 0%, rgba(255,210,185,0.45) 40%, transparent 75%); filter: blur(26px); }
.mc-3 { width: 480px; height: 150px; top: 50%; left: 30%; background: radial-gradient(ellipse at center, rgba(255,245,230,0.7) 0%, rgba(255,225,200,0.35) 45%, transparent 80%); filter: blur(22px); }
.fg-cloud-left, .fg-cloud-right {
position: absolute; bottom: -5%; width: 75%; height: 55%;
z-index: 7; pointer-events: none;
will-change: transform, opacity;
opacity: 0; transform: translate3d(0,0,0);
backface-visibility: hidden;
}
.fg-cloud-left { left: -40%; background: radial-gradient(ellipse 60% 50% at 70% 70%, rgba(255,255,255,0.95) 0%, rgba(255,240,225,0.7) 30%, rgba(255,220,195,0.3) 55%, transparent 80%), radial-gradient(ellipse 40% 35% at 40% 80%, rgba(255,250,240,0.85) 0%, rgba(255,235,215,0.5) 40%, transparent 75%); filter: blur(30px); }
.fg-cloud-right { right: -40%; background: radial-gradient(ellipse 60% 50% at 30% 70%, rgba(255,255,255,0.95) 0%, rgba(255,240,225,0.7) 30%, rgba(255,220,195,0.3) 55%, transparent 80%), radial-gradient(ellipse 40% 35% at 60% 80%, rgba(255,250,240,0.85) 0%, rgba(255,235,215,0.5) 40%, transparent 75%); filter: blur(30px); }
/* .hero-text-building layer removed — caused transition overlap with logo reveal */
.warm-cloud-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.warm-cloud { position: absolute; border-radius: 50%; will-change: transform, opacity; transform: translate3d(0,0,0); backface-visibility: hidden; }
.wc-1 { width: 1100px; height: 350px; top: 2%; left: -15%; background: radial-gradient(ellipse at center, rgba(255,180,120,0.7) 0%, rgba(255,150,90,0.4) 35%, rgba(255,120,60,0.15) 60%, transparent 80%); filter: blur(35px); }
.wc-2 { width: 800px; height: 280px; top: 8%; right: -10%; background: radial-gradient(ellipse at center, rgba(255,160,100,0.65) 0%, rgba(255,130,75,0.35) 35%, rgba(255,100,60,0.1) 60%, transparent 80%); filter: blur(30px); }
.wc-3 { width: 650px; height: 240px; top: 15%; left: 20%; background: radial-gradient(ellipse at center, rgba(255,200,160,0.6) 0%, rgba(255,170,130,0.3) 40%, transparent 75%); filter: blur(28px); }
.wc-4 { width: 950px; height: 300px; top: 5%; right: 15%; background: radial-gradient(ellipse at center, rgba(255,140,90,0.55) 0%, rgba(255,110,70,0.3) 35%, rgba(230,80,50,0.1) 60%, transparent 80%); filter: blur(38px); }
.wc-5 { width: 700px; height: 220px; top: 18%; left: -5%; background: radial-gradient(ellipse at center, rgba(255,190,150,0.5) 0%, rgba(255,160,120,0.25) 40%, transparent 75%); filter: blur(25px); }
.wc-6 { width: 1200px; height: 380px; top: -2%; left: 10%; background: radial-gradient(ellipse at center, rgba(255,170,110,0.5) 0%, rgba(255,140,85,0.25) 40%, rgba(255,110,60,0.08) 65%, transparent 85%); filter: blur(42px); }
.fog-layer { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.fog { position: absolute; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 40%, rgba(255,255,255,0) 70%); filter: blur(40px); will-change: transform, opacity; opacity: 0; transform: translate3d(0,0,0); backface-visibility: hidden; }
.fog-1 { width: 900px; height: 500px; top: 20%; left: -20%; filter: blur(50px); }
.fog-2 { width: 700px; height: 400px; top: 40%; left: -15%; filter: blur(45px); }
.fog-3 { width: 1000px; height: 550px; top: 30%; left: -5%; filter: blur(55px); }
.fog-4 { width: 600px; height: 350px; top: 50%; left: 5%; filter: blur(40px); }
.fog-5 { width: 880px; height: 480px; top: 22%; right: -18%; filter: blur(50px); }
.fog-6 { width: 720px; height: 420px; top: 42%; right: -12%; filter: blur(45px); }
.fog-7 { width: 980px; height: 540px; top: 32%; right: -3%; filter: blur(55px); }
.fog-8 { width: 620px; height: 360px; top: 52%; right: 8%; filter: blur(40px); }
.hero-smoke {
position: absolute; bottom: 0; left: 0;
width: 100%; height: 40%; z-index: 6;
background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.85) 80%, white 100%);
opacity: 0; pointer-events: none;
}
.hero-logo-reveal {
position: absolute; inset: 0; z-index: 8;
display: flex; flex-direction: column; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
}
.hero-logo-reveal .hero-logo-mark { width: clamp(130px, 18vw, 220px); height: auto; display: block; margin: 0 auto; }
.hero-logo-reveal .logo-wordmark { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(34px, 5vw, 58px); font-weight: 600; color: var(--text-dark); letter-spacing: 0; line-height: 1.1; margin-top: 28px; }
.hero-logo-reveal .logo-wordmark span { color: var(--primary); }
.hero-logo-reveal .logo-tagline { font-family: 'Inter', sans-serif; font-size: clamp(11px, 1.5vw, 14px); font-weight: 600; color: #8A94A6; letter-spacing: 4px; text-transform: uppercase; margin-top: 16px; }
.hero-logo-reveal .logo-url { font-size: clamp(13px, 1.6vw, 18px); font-weight: 700; color: var(--primary); letter-spacing: 2px; margin-top: 10px; }
.hero-content {
position: absolute; inset: 0;
display: flex; flex-direction: column; justify-content: center; align-items: center;
text-align: center; z-index: 10; color: var(--text-light); pointer-events: none;
}
.hero-content h1 { font-size: clamp(34px, 6.5vw, 76px); font-weight: 900; line-height: 1.05; max-width: 85%; margin-bottom: 20px; letter-spacing: -2px; text-shadow: 0 2px 30px rgba(0,0,0,0.3); }
.hero-content p { font-size: clamp(14px, 1.8vw, 19px); max-width: 65%; margin-bottom: 36px; opacity: 0.95; font-weight: 500; text-shadow: 0 1px 10px rgba(0,0,0,0.3); }
.hero-cta {
background: var(--primary); color: var(--text-light);
padding: 16px 36px; border-radius: 8px;
text-decoration: none; font-weight: 700; font-size: 16px;
cursor: pointer; pointer-events: all; border: none;
transition: all 0.3s; font-family: inherit;
}
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(230,57,70,0.4); background: var(--primary-dark); }
/* ============ CHEVRON SECTION ============ */
.chevron-section { position: relative; z-index: 200; background: white; padding: 100px 40px 80px; overflow: hidden; }
.chevron-section .section-headline { text-align: center; margin-bottom: 60px; }
.chevron-section .section-headline h2 { font-size: clamp(32px, 5vw, 56px); font-weight: 900; letter-spacing: -2px; line-height: 1.1; }
.chevron-section .section-headline h2 .light { color: #C0C0C0; font-weight: 900; }
.chevron-arrows { display: flex; justify-content: center; gap: 12px; margin: 0 auto 60px; max-width: 1100px; height: 380px; overflow: hidden; }
.chevron-arrow {
flex: 1; position: relative; overflow: hidden;
background-size: cover; background-position: center;
background-attachment: fixed;
}
.chevron-arrow:nth-child(1) { clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%); background-image: url('https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=1600&q=80'); }
.chevron-arrow:nth-child(2) { clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%); background-image: url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1600&q=80'); }
.chevron-arrow:nth-child(3) { clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%); background-image: url('https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?w=1600&q=80'); }
.chevron-arrow:nth-child(4) { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 25% 50%); background-image: url('https://images.unsplash.com/photo-1508514177221-188b1cf16e9d?w=1600&q=80'); }
.chevron-section .section-body { text-align: center; max-width: 700px; margin: 0 auto; }
.chevron-section .section-body p { font-size: clamp(18px, 2.5vw, 26px); line-height: 1.5; margin-bottom: 12px; }
.chevron-section .section-body p strong { font-weight: 900; color: var(--text-dark); }
.chevron-section .section-body p.muted { color: #999; font-weight: 500; }
/* ============ SERVICES GRID ============ */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; max-width: 1200px; margin: 0 auto 40px; }
.service-card {
background: white; padding: 36px;
border-radius: var(--radius);
border-left: 4px solid var(--primary);
box-shadow: var(--shadow-md);
transition: all 0.3s;
display: flex; flex-direction: column; gap: 12px;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.service-card h3 { color: var(--primary); margin: 0; }
.service-card .icon-wrap { width: 48px; height: 48px; border-radius: 10px; background: rgba(230,57,70,0.1); display: flex; align-items: center; justify-content: center; }
.service-card .icon-wrap svg { width: 26px; height: 26px; fill: var(--primary); }
/* ============ STATS BAR ============ */
.stats-bar {
background: var(--secondary);
color: var(--text-light);
padding: 60px 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 40px; text-align: center;
margin: 60px auto;
border-radius: var(--radius-lg);
max-width: 1200px;
}
.stat-item h4 { font-size: 44px; font-weight: 900; color: var(--primary); margin-bottom: 8px; line-height: 1; }
.stat-item p { color: #C9D2DF; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }
/* ============ PROJECTS GRID ============ */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 28px; max-width: 1200px; margin: 0 auto; }
.project-card { background: white; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); transition: all 0.3s; display: flex; flex-direction: column; }
.project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.project-header { height: 200px; display: flex; align-items: flex-end; justify-content: flex-start; color: white; font-size: 56px; font-weight: 900; position: relative; overflow: hidden; letter-spacing: -2px; padding: 18px 20px; }
.project-header.photo { background-size: cover; background-position: center; }
.project-header.photo::before { content: ''; background: none; width: 0; height: 0; animation: none; }
.project-header.photo::after { background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%); }
.project-header.photo .label { font-size: 22px; font-weight: 800; letter-spacing: 0; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.project-header::before { content: ''; position: absolute; width: 200%; height: 200%; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.08), rgba(255,255,255,0.08) 10px, transparent 10px, transparent 20px); animation: stripeShift 12s linear infinite; }
.project-header::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 30%, rgba(255,255,255,0.15) 0%, transparent 60%); }
.project-header .label { position: relative; z-index: 1; }
@keyframes stripeShift { 0% { transform: translate(0,0); } 100% { transform: translate(50px,50px); } }
.project-content { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.project-badge { display: inline-block; color: white; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; align-self: flex-start; }
.project-badge.residential { background: #2A9D8F; }
.project-badge.commercial { background: var(--primary); }
.project-meta { margin-top: auto; padding-top: 16px; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border); }
.project-meta span { display: inline-block; margin-right: 16px; }
.project-meta strong { color: var(--text-dark); font-weight: 700; }
/* ============ ACCORDION ============ */
.accordion-item { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; overflow: hidden; max-width: 1200px; margin-left: auto; margin-right: auto; }
.accordion-header { padding: 20px 24px; background: white; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--text-dark); user-select: none; transition: background 0.2s; width: 100%; text-align: left; border: 0; font-family: inherit; font-size: 16px; }
.accordion-header:hover { background: #F8F8F8; }
.accordion-header::after { content: '+'; font-size: 20px; color: var(--primary); font-weight: 700; transition: transform 0.3s; }
.accordion-item.active .accordion-header::after { content: '\2212'; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; padding: 0 24px; }
.accordion-item.active .accordion-content { max-height: 800px; padding: 0 24px 24px 24px; }
.accordion-content p { margin: 0; }
/* ============ CONTACT ============ */
.contact-container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; max-width: 1200px; margin: 0 auto; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-group { display: flex; flex-direction: column; }
.contact-form label { font-weight: 600; color: var(--text-dark); margin-bottom: 6px; font-size: 14px; }
.contact-form input, .contact-form textarea { padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 14px; transition: all 0.3s; background: white; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(230,57,70,0.1); }
.contact-form input[aria-invalid="true"], .contact-form textarea[aria-invalid="true"] { border-color: var(--primary); background: rgba(230,57,70,0.03); }
.contact-form .field-error { color: var(--primary); font-size: 13px; margin-top: 4px; display: none; }
.contact-form [aria-invalid="true"] + .field-error { display: block; }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form button { background: var(--primary); color: white; padding: 14px 28px; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; transition: all 0.3s; font-size: 16px; font-family: inherit; }
.contact-form button:hover:not(:disabled) { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(230,57,70,0.3); }
.contact-form button:disabled { opacity: 0.7; cursor: wait; }
.contact-form .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form-status { padding: 14px 16px; border-radius: 8px; font-size: 14px; margin-top: 6px; line-height: 1.5; }
.form-status.success { background: #E6F8EF; color: #0E7C45; border-left: 3px solid #12A35A; }
.form-status.error { background: #FEECEC; color: #B4242F; border-left: 3px solid var(--primary); }
.form-status a { color: inherit; text-decoration: underline; font-weight: 700; cursor: pointer; }
.contact-info { display: flex; flex-direction: column; gap: 28px; }
.contact-item { display: flex; gap: 20px; align-items: flex-start; }
.contact-item-icon { width: 48px; height: 48px; background: var(--primary); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-item-icon svg { width: 22px; height: 22px; fill: white; }
.contact-item-text h4 { margin-bottom: 4px; color: var(--text-dark); font-size: 15px; }
.contact-item-text p { margin: 0; font-size: 15px; }
.contact-item-text a { color: var(--primary); text-decoration: none; font-weight: 600; }
.contact-item-text a:hover { text-decoration: underline; }
/* ============ MAP ============ */
.map-wrap { max-width: 1200px; margin: 60px auto 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.map-wrap iframe { display: block; width: 100%; height: 400px; border: 0; }
/* ============ ABOUT ============ */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: 1200px; margin: 0 auto; }
.about-content h3 { font-size: 30px; margin-bottom: 24px; letter-spacing: -0.5px; }
.about-content p { margin-bottom: 18px; }
.certifications { background: white; padding: 24px; border-left: 4px solid var(--primary); border-radius: 8px; margin-top: 30px; box-shadow: var(--shadow-sm); }
.certifications h4 { color: var(--secondary); margin-bottom: 12px; }
.certifications ul { list-style: none; padding: 0; }
.certifications li { padding: 6px 0; color: #555; }
.certifications li::before { content: '\2713 '; color: var(--primary); font-weight: 700; }
.about-visual { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: linear-gradient(135deg, var(--secondary) 0%, var(--bg-dark) 100%); aspect-ratio: 4/5; position: relative; display: flex; align-items: center; justify-content: center; color: white; padding: 40px; text-align: center; }
.about-visual .placeholder-label { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.6); font-weight: 600; }
/* ============ TESTIMONIALS ============ */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; max-width: 1200px; margin: 0 auto; }
.testimonial-card { background: white; border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-md); border-top: 4px solid var(--primary); }
.testimonial-card .quote-mark { font-size: 48px; color: var(--primary); line-height: 1; font-family: Georgia, serif; margin-bottom: 8px; }
.testimonial-card blockquote { font-style: italic; color: var(--text-dark); font-size: 16px; line-height: 1.7; margin-bottom: 20px; }
.testimonial-card .author { display: flex; align-items: center; gap: 12px; }
.testimonial-card .author-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; flex-shrink: 0; }
.testimonial-card .author-info strong { display: block; color: var(--text-dark); font-size: 15px; }
.testimonial-card .author-info span { color: var(--text-muted); font-size: 13px; }
/* ============ CLIENT LOGOS BAR ============ */
.logos-bar { background: white; padding: 60px 40px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.logos-bar .logos-label { text-align: center; color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 32px; }
.logos-row { display: flex; justify-content: center; align-items: center; gap: 48px; max-width: 1200px; margin: 0 auto; flex-wrap: wrap; }
.logo-chip { color: var(--text-muted); font-weight: 800; font-size: 18px; letter-spacing: 0.5px; padding: 8px 18px; border: 2px solid var(--border); border-radius: 30px; transition: all 0.3s; opacity: 0.65; }
.logo-chip:hover { color: var(--primary); border-color: var(--primary); opacity: 1; }
/* ============ CTA STRIP ============ */
.cta-strip { background: linear-gradient(135deg, var(--primary) 0%, #C42E3A 100%); color: white; padding: 80px 40px; text-align: center; }
.cta-strip h2 { color: white; margin-bottom: 20px; }
.cta-strip p { color: rgba(255,255,255,0.95); font-size: 18px; max-width: 600px; margin: 0 auto 32px; }
.cta-strip .hero-cta { background: white; color: var(--primary); }
.cta-strip .hero-cta:hover { background: #F8F8F8; color: var(--primary); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
/* ============ FLOATING WHATSAPP BUTTON ============ */
.whatsapp-float {
position: fixed;
bottom: 24px; right: 24px;
width: 60px; height: 60px;
background: #25D366;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(37,211,102,0.4);
z-index: 9998;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(37,211,102,0.5); }
.whatsapp-float svg { width: 30px; height: 30px; fill: white; }
.whatsapp-float::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: pulseRing 2.5s ease-out infinite; }
@keyframes pulseRing {
0% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(1.6); opacity: 0; }
}
/* ============ COOKIE BANNER ============ */
.cookie-banner {
position: fixed;
bottom: 24px; left: 24px;
max-width: 420px;
background: white;
color: var(--text-dark);
padding: 20px 22px;
border-radius: var(--radius);
box-shadow: 0 20px 50px rgba(0,0,0,0.2);
z-index: 9997;
border-left: 4px solid var(--primary);
transform: translateY(150%);
transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cookie-banner.visible { transform: translateY(0); }
.cookie-banner h4 { margin: 0 0 6px; font-size: 15px; color: var(--text-dark); }
.cookie-banner p { margin: 0 0 14px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.cookie-banner .cookie-actions { display: flex; gap: 10px; }
.cookie-banner button {
padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 700;
cursor: pointer; border: 0; font-family: inherit;
transition: all 0.3s;
}
.cookie-banner .btn-accept { background: var(--primary); color: white; }
.cookie-banner .btn-accept:hover { background: var(--primary-dark); }
.cookie-banner .btn-decline { background: #F3F4F6; color: var(--text-dark); }
.cookie-banner .btn-decline:hover { background: #E5E7EB; }
.cookie-banner a { color: var(--primary); text-decoration: none; font-weight: 600; }
.cookie-banner a:hover { text-decoration: underline; }
/* ============ FOOTER ============ */
footer.site-footer { background: var(--secondary); color: var(--text-light); padding: 60px 40px 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; max-width: 1200px; margin: 0 auto 40px; }
.footer-col h5 { color: white; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: #C9D2DF; text-decoration: none; font-size: 14px; transition: color 0.2s; }
.footer-col a:hover { color: var(--primary); }
.footer-brand p { color: #C9D2DF; font-size: 14px; line-height: 1.6; margin: 14px 0; max-width: 340px; }
.footer-logo-wrap { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.footer-logo-wrap svg { height: 48px; width: auto; display: block; }
.footer-logo { font-family: 'Playfair Display', Georgia, serif; font-size: 24px; font-weight: 600; letter-spacing: 0; color: white; }
.footer-logo span { color: var(--primary); }
.footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; color: #8A94A6; font-size: 13px; }
.footer-bottom a { color: #8A94A6; text-decoration: none; }
.footer-bottom a:hover { color: var(--primary); }
/* ============ LEGAL PAGES ============ */
.legal-content { max-width: 800px; margin: 0 auto; padding: 20px 0; }
.legal-content h2 { text-align: left; font-size: 28px; margin: 40px 0 16px; }
.legal-content h3 { font-size: 20px; margin: 28px 0 12px; }
.legal-content p, .legal-content li { color: #4B5563; line-height: 1.7; font-size: 16px; margin-bottom: 12px; }
.legal-content ul { padding-left: 24px; }
/* ============ BILINGUAL ============ */
[data-lang="en"] { display: none; }
body.lang-en [data-lang="es"] { display: none; }
body.lang-en [data-lang="en"] { display: block; }
body.lang-en li[data-lang="en"] { display: list-item; }
body.lang-en span[data-lang="en"] { display: inline; }
/* ============ REVEAL SECTIONS ============ */
.reveal-section { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-section.visible { opacity: 1; transform: translateY(0); }
/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
nav.site-nav { padding: 0 20px; height: 60px; }
nav.site-nav { overflow: hidden; }
nav.site-nav.menu-open { overflow: visible; }
nav.site-nav .nav-toggle-btn { display: block; }
nav.site-nav .nav-links {
position: absolute; top: 60px; left: 0; right: 0;
flex-direction: column; gap: 0; align-items: stretch;
background: rgba(10,22,40,0.98); backdrop-filter: blur(20px);
padding: 12px 0; transform: translateY(-120%);
transition: transform 0.35s ease, visibility 0.35s;
pointer-events: none; visibility: hidden;
}
nav.site-nav.menu-open .nav-links { transform: translateY(0); pointer-events: auto; visibility: visible; }
nav.site-nav .nav-links a { padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,0.05); }
nav.site-nav .lang-toggle { order: 99; margin: 12px 24px; }
section { padding: 70px 20px; }
.page-header { padding: calc(var(--nav-h) + 50px) 20px 70px; }
.contact-container { grid-template-columns: 1fr; gap: 40px; }
.about-grid { grid-template-columns: 1fr; }
.services-grid, .projects-grid, .testimonials-grid { grid-template-columns: 1fr; }
.project-header { height: 220px; }
.project-header.photo { height: 260px; }
.stats-bar { grid-template-columns: 1fr; gap: 24px; padding: 40px 20px; }
.chevron-arrows { height: 220px; gap: 6px; }
.chevron-section { padding: 60px 20px 50px; }
.fog { transform: scale(0.5) !important; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
.footer-brand { grid-column: 1 / -1; }
.cookie-banner { left: 16px; right: 16px; bottom: 16px; max-width: none; }
.whatsapp-float { width: 54px; height: 54px; bottom: 16px; right: 16px; }
.hero-container { height: 450vh; }
}
/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.hero-container { height: 100vh; margin-bottom: 0; }
.hero-viewport { position: relative; }
.warm-cloud, .mid-cloud, .fg-cloud-left, .fg-cloud-right, .fog, .hero-haze, .hero-skyline, .hero-back { transform: none !important; }
.chevron-arrow { background-attachment: scroll; }
.whatsapp-float::after { animation: none; }
}
/* ============================================================
PREMIUM LAYER — findrealestate.com-grade polish
Added in one pass; every rule is additive, nothing above
is overridden unless it had to move to match the new rhythm.
============================================================ */
/* ----- Lenis smooth scroll base classes ----- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
/* ----- Refined root tokens ----- */
:root {
--ink: #0F1115;
--ink-soft: #2A2E36;
--ghost: #B6B8BD;
--ghost-dim: #D7D9DC;
--cream: #F5F1EA;
--cream-deep: #EEE7DC;
--rule: rgba(15,17,21,0.08);
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
--ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
--space-section: clamp(100px, 14vh, 180px);
}
body { background: #fff; }
/* ----- Typography upgrades ----- */
.eyebrow-label {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--primary);
display: inline-flex;
align-items: center;
gap: 10px;
}
.eyebrow-label::before {
content: '';
width: 28px; height: 1px;
background: var(--primary);
display: inline-block;
}
.display {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-size: clamp(40px, 7.2vw, 104px);
line-height: 0.98;
letter-spacing: -0.035em;
color: var(--ink);
}
.display em {
font-style: italic;
font-weight: 400;
}
.display .ghost,
.two-tone .ghost {
color: var(--ghost);
font-weight: inherit;
}
.two-tone { color: var(--ink); }
/* Make existing h2 lean premium when wrapped in .section-display */
section.section-display h2 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-size: clamp(36px, 5.5vw, 72px);
line-height: 1.02;
letter-spacing: -0.03em;
margin-bottom: 32px;
}
section.section-display h2 .accent { color: var(--primary); font-style: italic; font-weight: 400; }
section.section-display .section-subtitle {
font-size: 18px;
color: #5A5F68;
max-width: 640px;
margin: 0 auto 80px;
line-height: 1.55;
}
/* ----- Global section rhythm ----- */
section { padding: var(--space-section) 40px; }
section.tight { padding: calc(var(--space-section) * 0.55) 40px; }
section.alt-bg { background: var(--cream); }
section.ink-bg { background: var(--ink); color: #fff; }
section.ink-bg h2, section.ink-bg h3 { color: #fff; }
section.ink-bg .section-subtitle { color: rgba(255,255,255,0.7); }
/* ----- Premium pill CTA system ----- */
.cta-pill {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 16px 28px 16px 32px;
border-radius: 999px;
background: var(--ink);
color: #fff;
text-decoration: none;
font-weight: 500;
font-size: 15px;
letter-spacing: 0.01em;
border: 1px solid var(--ink);
transition: transform 0.6s var(--ease-out-expo), background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
cursor: pointer;
font-family: inherit;
will-change: transform;
}
.cta-pill::after {
content: '';
width: 22px; height: 22px;
border-radius: 999px;
background: #fff url("data:image/svg+xml;utf8,") center/12px no-repeat;
transition: transform 0.45s var(--ease-out-expo);
}
.cta-pill:hover { transform: scaleX(1.035); background: var(--primary); border-color: var(--primary); }
.cta-pill:hover::after { transform: translateX(4px); background-color: #fff; }
.cta-pill.ghost { background: transparent; color: var(--ink); border-color: rgba(15,17,21,0.2); }
.cta-pill.ghost::after { background-color: var(--ink); background-image: url("data:image/svg+xml;utf8,"); }
.cta-pill.ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.cta-pill.brand { background: var(--primary); border-color: var(--primary); box-shadow: 0 14px 36px rgba(230,50,50,0.28); }
.cta-pill.brand:hover { background: #CC1F1F; border-color: #CC1F1F; }
/* Keep existing .hero-cta visually consistent with the new pill standard */
.hero-cta {
display: inline-flex; align-items: center; gap: 14px;
padding: 16px 28px 16px 32px;
border-radius: 999px;
font-weight: 500; font-size: 15px; letter-spacing: 0.01em;
transition: transform 0.6s var(--ease-out-expo), background 0.3s ease;
}
.hero-cta::after {
content: '';
width: 22px; height: 22px;
border-radius: 999px;
background: #fff url("data:image/svg+xml;utf8,") center/12px no-repeat;
transition: transform 0.45s var(--ease-out-expo);
}
.hero-cta:hover { transform: scaleX(1.035); background: var(--primary-dark); }
.hero-cta:hover::after { transform: translateX(4px); }
/* ----- NAV upgrade ----- */
nav.site-nav {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
transition: transform 0.5s var(--ease-out-expo), background 0.4s ease, backdrop-filter 0.4s ease, color 0.4s ease, border-color 0.4s ease;
border-bottom: 1px solid transparent;
}
body[data-page="home"] nav.site-nav { background: linear-gradient(180deg, rgba(10,12,18,0.55), transparent); }
nav.site-nav.scrolled {
background: rgba(255,255,255,0.88);
backdrop-filter: saturate(160%) blur(22px);
-webkit-backdrop-filter: saturate(160%) blur(22px);
border-bottom-color: var(--rule);
color: var(--ink);
}
nav.site-nav.scrolled .logo-text,
nav.site-nav.scrolled .nav-links a { color: var(--ink); }
nav.site-nav.scrolled .lang-toggle { background: transparent; border-color: rgba(15,17,21,0.18); color: var(--ink); }
nav.site-nav.scrolled .lang-toggle:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
nav.site-nav.scrolled .nav-toggle-btn { color: var(--ink); }
nav.site-nav .logo-text { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; letter-spacing: -0.01em; }
/* Nav link hover — findrealestate-style slide-up */
nav.site-nav .nav-links { gap: 44px; }
nav.site-nav .nav-links a {
position: relative;
font-weight: 500;
font-size: 13.5px;
letter-spacing: 0.02em;
overflow: hidden;
display: inline-block;
height: 1.3em;
line-height: 1.3em;
}
nav.site-nav .nav-links a::after {
content: attr(data-hover);
position: absolute;
left: 0; top: 105%;
color: var(--primary);
transition: transform 0.5s var(--ease-out-expo);
white-space: nowrap;
}
nav.site-nav .nav-links a:hover > span,
nav.site-nav .nav-links a:hover { color: transparent; }
nav.site-nav .nav-links a:hover::after { transform: translateY(-105%); color: var(--primary); }
nav.site-nav.scrolled .nav-links a:hover::after { color: var(--primary); }
body.lang-en nav.site-nav .nav-links a::after { content: attr(data-hover-en); }
/* Nav CTA button */
nav.site-nav .nav-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px 10px 22px;
border-radius: 999px;
background: var(--primary);
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
border: 1px solid var(--primary);
transition: transform 0.4s var(--ease-out-expo), background 0.3s ease;
margin-left: 8px;
}
nav.site-nav .nav-cta::after {
content: '';
width: 16px; height: 16px;
border-radius: 999px;
background: #fff url("data:image/svg+xml;utf8,") center/10px no-repeat;
transition: transform 0.35s var(--ease-out-expo);
}
nav.site-nav .nav-cta:hover { transform: scaleX(1.03); background: #CC1F1F; border-color: #CC1F1F; }
nav.site-nav .nav-cta:hover::after { transform: translateX(3px); }
/* ----- Scroll progress: thinner, more elegant ----- */
.scroll-progress { height: 2px; background: var(--primary); }
/* ----- SECTION HEADLINE: eyebrow + big serif + subtitle ----- */
.section-heading {
text-align: center;
max-width: 780px;
margin: 0 auto 72px;
}
.section-heading .eyebrow-label { margin-bottom: 22px; }
.section-heading h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(36px, 5.2vw, 68px);
font-weight: 500;
line-height: 1.03;
letter-spacing: -0.028em;
margin: 0 0 22px;
color: var(--ink);
}
.section-heading h2 em {
font-style: italic;
font-weight: 400;
color: var(--primary);
}
.section-heading h2 .ghost { color: var(--ghost); font-weight: inherit; }
.section-heading p {
font-size: 18px;
line-height: 1.5;
color: #5A5F68;
max-width: 640px;
margin: 0 auto;
}
/* Left-align variant */
.section-heading.left { text-align: left; margin-left: 0; margin-right: auto; max-width: 900px; padding-left: max(40px, calc((100vw - 1200px) / 2)); }
/* ----- Chevron section polish (keep arrows but refine type) ----- */
.chevron-section { padding: var(--space-section) 40px; }
.chevron-section .section-headline h2 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-size: clamp(36px, 5.5vw, 72px);
line-height: 1.02;
letter-spacing: -0.03em;
}
.chevron-section .section-headline h2 .light {
color: var(--ghost);
font-weight: 500;
font-style: italic;
}
.chevron-arrows { max-width: 1280px; }
/* ----- SERVICES GRID: premium card restyle ----- */
.services-grid { gap: 24px; }
.service-card {
background: #fff;
padding: 44px 36px 40px;
border-radius: 18px;
border: 1px solid var(--rule);
border-left: 1px solid var(--rule);
box-shadow: none;
transition: transform 0.65s var(--ease-out-expo), border-color 0.45s ease, box-shadow 0.5s ease, background 0.45s ease;
position: relative;
overflow: hidden;
}
.service-card::after {
content: '';
position: absolute;
left: 36px; right: 36px; bottom: 0;
height: 2px; background: var(--primary);
transform: scaleX(0); transform-origin: left;
transition: transform 0.7s var(--ease-out-expo);
}
.service-card:hover {
transform: translateY(-6px);
border-color: rgba(230,50,50,0.22);
box-shadow: 0 28px 60px -24px rgba(15,17,21,0.18);
}
.service-card:hover::after { transform: scaleX(1); }
.service-card h3 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 24px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 14px;
margin-top: 6px;
}
.service-card p { color: #5A5F68; font-size: 15.5px; line-height: 1.6; }
.service-card .icon-wrap {
width: 54px; height: 54px;
border-radius: 14px;
background: var(--cream);
margin-bottom: 10px;
transition: background 0.35s ease;
}
.service-card:hover .icon-wrap { background: rgba(230,50,50,0.12); }
.service-card .icon-wrap svg { width: 22px; height: 22px; }
/* ----- PROJECT CARDS premium restyle ----- */
.project-card {
background: #fff;
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--rule);
box-shadow: none;
transition: transform 0.7s var(--ease-out-expo), border-color 0.4s ease, box-shadow 0.5s ease;
}
.project-card:hover {
transform: translateY(-8px);
border-color: rgba(230,50,50,0.22);
box-shadow: 0 32px 70px -28px rgba(15,17,21,0.22);
}
.project-header { height: 280px; overflow: hidden; position: relative; }
.project-header.photo { background-size: cover; background-position: center; transition: transform 1.6s var(--ease-out-expo); }
.project-card:hover .project-header.photo { transform: scale(1.06); }
/* ----- Project hover video ----- */
.project-video {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.6s var(--ease-out-expo);
pointer-events: none;
z-index: 1;
background: #000;
}
.project-card:hover .project-video.ready { opacity: 1; }
.project-header .label,
.project-header::after,
.project-header::before { z-index: 2; }
/* Tiny sound indicator on hovered card */
.project-card .sound-chip {
position: absolute;
top: 18px; right: 18px;
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px 6px 10px;
border-radius: 999px;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(10px);
color: #fff;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.4s ease, transform 0.4s var(--ease-out-expo);
z-index: 3;
pointer-events: none;
}
.project-card:hover .sound-chip { opacity: 1; transform: translateY(0); }
.project-card .sound-chip svg { width: 12px; height: 12px; fill: currentColor; }
/* ----- Sound toggle in nav ----- */
.sound-toggle {
display: inline-flex;
align-items: center; justify-content: center;
width: 36px; height: 36px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.22);
background: transparent;
cursor: pointer;
color: inherit;
transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
padding: 0;
margin-right: 4px;
}
nav.site-nav.scrolled .sound-toggle { border-color: rgba(15,17,21,0.18); }
.sound-toggle:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.sound-toggle svg { width: 15px; height: 15px; fill: currentColor; }
.sound-toggle .icon-on { display: none; }
.sound-toggle.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.sound-toggle.active .icon-off { display: none; }
.sound-toggle.active .icon-on { display: block; }
@media (max-width: 900px) { .sound-toggle { display: none; } }
.project-header .label {
font-family: 'Playfair Display', Georgia, serif;
font-size: 26px;
font-weight: 500;
letter-spacing: -0.015em;
}
.project-content { padding: 32px 32px 30px; }
.project-content h3 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 28px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 14px;
margin-top: 8px;
}
.project-content p { color: #5A5F68; font-size: 15.5px; line-height: 1.6; }
.project-badge { background: var(--ink) !important; color: #fff !important; padding: 5px 14px; font-weight: 500; letter-spacing: 0.06em; font-size: 10.5px; }
.project-meta { margin-top: 22px; padding-top: 18px; font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; }
.project-meta strong { font-weight: 600; color: var(--ink); }
/* ----- STATS BAR premium ----- */
.stats-bar {
background: var(--ink);
padding: 72px 48px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.06);
}
.stat-item h4 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(48px, 6vw, 84px);
font-weight: 500;
letter-spacing: -0.035em;
color: #fff;
line-height: 1;
margin-bottom: 12px;
}
.stat-item p {
color: rgba(255,255,255,0.6);
font-size: 11.5px;
letter-spacing: 0.18em;
font-weight: 500;
}
/* ----- TESTIMONIALS premium ----- */
.testimonial-card {
background: #fff;
border-radius: 20px;
padding: 44px 36px 36px;
border: 1px solid var(--rule);
border-top: 1px solid var(--rule);
transition: transform 0.6s var(--ease-out-expo), border-color 0.4s ease, box-shadow 0.5s ease;
position: relative;
}
.testimonial-card:hover {
transform: translateY(-4px);
border-color: rgba(230,50,50,0.22);
box-shadow: 0 28px 60px -24px rgba(15,17,21,0.18);
}
.testimonial-card .quote-mark {
font-family: 'Playfair Display', Georgia, serif;
font-size: 72px;
font-style: italic;
line-height: 0.6;
color: var(--primary);
margin-bottom: 16px;
margin-top: 4px;
}
.testimonial-card blockquote {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 400;
font-style: italic;
font-size: 20px;
line-height: 1.45;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: 28px;
}
.testimonial-card .author-info strong { font-size: 14.5px; font-weight: 600; }
.testimonial-card .author-info span { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ghost); }
/* ----- MARQUEE — certifications row ----- */
.marquee {
padding: 36px 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
background: #fff;
overflow: hidden;
position: relative;
}
.marquee.dark { background: var(--ink); border-color: rgba(255,255,255,0.08); }
.marquee-track {
display: flex;
gap: 56px;
white-space: nowrap;
animation: marquee-scroll 42s linear infinite;
will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-size: clamp(32px, 4vw, 54px);
letter-spacing: -0.02em;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 56px;
flex-shrink: 0;
}
.marquee.dark .marquee-item { color: #fff; }
.marquee-item em { font-style: italic; color: var(--primary); }
.marquee-item::after {
content: '';
width: 10px; height: 10px;
border-radius: 50%;
background: var(--primary);
display: inline-block;
margin-left: 56px;
flex-shrink: 0;
}
.marquee.dark .marquee-item::after { background: var(--primary); }
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ----- MANIFESTO BAND — big type moment after hero ----- */
.manifesto {
padding: calc(var(--space-section) * 1.15) 40px calc(var(--space-section) * 1.05);
background: #fff;
text-align: left;
}
.manifesto-inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 28px;
}
.manifesto p.lead {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 400;
font-size: clamp(34px, 4.8vw, 76px);
line-height: 1.08;
letter-spacing: -0.03em;
color: var(--ink);
max-width: 18ch;
}
.manifesto p.lead em { font-style: italic; font-weight: 400; color: var(--primary); }
.manifesto p.lead .ghost { color: var(--ghost); font-weight: inherit; }
.manifesto .manifesto-meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid var(--rule);
flex-wrap: wrap;
}
.manifesto .manifesto-meta .eyebrow-label { color: var(--ink); }
.manifesto .manifesto-meta .eyebrow-label::before { background: var(--ink); }
.manifesto .manifesto-meta p {
max-width: 420px;
font-size: 15.5px;
line-height: 1.65;
color: #5A5F68;
}
/* ----- CAPABILITIES STRIP — two-column image + list ----- */
.capabilities {
padding: var(--space-section) 40px;
background: var(--cream);
}
.capabilities-inner {
max-width: 1280px; margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 80px;
align-items: start;
}
.capabilities-copy .eyebrow-label { margin-bottom: 28px; }
.capabilities-copy h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(38px, 4.8vw, 68px);
font-weight: 500;
line-height: 1.02;
letter-spacing: -0.03em;
text-align: left;
margin: 0 0 28px;
color: var(--ink);
}
.capabilities-copy h2 em { font-style: italic; font-weight: 400; color: var(--primary); }
.capabilities-copy h2 .ghost { color: var(--ghost); font-weight: inherit; }
.capabilities-copy p { font-size: 17px; line-height: 1.6; color: #5A5F68; margin-bottom: 20px; max-width: 500px; }
.capabilities-list {
display: flex;
flex-direction: column;
gap: 1px;
background: rgba(15,17,21,0.1);
border-radius: 18px;
overflow: hidden;
border: 1px solid var(--rule);
}
.capability-row {
background: #fff;
padding: 26px 28px;
display: grid;
grid-template-columns: 60px 1fr auto;
align-items: center;
gap: 20px;
transition: background 0.4s ease;
}
.capability-row:hover { background: #FFF8F4; }
.capability-row .num {
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-size: 22px;
color: var(--primary);
font-weight: 500;
letter-spacing: -0.02em;
}
.capability-row .title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 22px;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--ink);
}
.capability-row .arrow {
width: 36px; height: 36px;
border-radius: 999px;
background: var(--ink);
display: inline-flex;
align-items: center; justify-content: center;
transition: background 0.3s ease, transform 0.5s var(--ease-out-expo);
}
.capability-row .arrow svg { width: 14px; height: 14px; stroke: #fff; }
.capability-row:hover .arrow { background: var(--primary); transform: translateX(6px); }
/* ----- CTA STRIP premium ----- */
.cta-strip {
background: var(--ink);
padding: calc(var(--space-section) * 0.95) 40px;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-strip::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(230,50,50,0.18), transparent 70%);
pointer-events: none;
}
.cta-strip > * { position: relative; z-index: 1; }
.cta-strip h2 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-size: clamp(42px, 6vw, 88px);
line-height: 1.02;
letter-spacing: -0.03em;
color: #fff;
margin-bottom: 28px;
max-width: 18ch;
margin-left: auto; margin-right: auto;
}
.cta-strip h2 em { font-style: italic; font-weight: 400; color: var(--primary); }
.cta-strip p { color: rgba(255,255,255,0.68); font-size: 17px; max-width: 560px; margin: 0 auto 40px; line-height: 1.55; }
.cta-strip .hero-cta,
.cta-strip .cta-pill {
background: #fff;
color: var(--ink);
border-color: #fff;
}
.cta-strip .hero-cta::after,
.cta-strip .cta-pill::after {
background-color: var(--primary);
background-image: url("data:image/svg+xml;utf8,");
}
.cta-strip .hero-cta:hover,
.cta-strip .cta-pill:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.cta-strip .hero-cta:hover::after,
.cta-strip .cta-pill:hover::after { background-color: #fff; background-image: url("data:image/svg+xml;utf8,"); }
/* ----- FOOTER premium upgrade ----- */
footer.site-footer {
background: var(--ink);
padding: 100px 40px 32px;
}
.footer-grid { max-width: 1280px; }
.footer-col h5 { font-family: 'Inter', sans-serif; color: rgba(255,255,255,0.5); font-size: 11px; letter-spacing: 0.22em; font-weight: 500; }
.footer-col a { color: rgba(255,255,255,0.85); font-size: 14.5px; transition: color 0.25s ease, transform 0.25s ease; display: inline-block; }
.footer-col a:hover { color: var(--primary); transform: translateX(3px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 32px; margin-top: 20px; color: rgba(255,255,255,0.4); }
.footer-bottom a { color: rgba(255,255,255,0.55); }
.footer-bottom a:hover { color: var(--primary); }
.footer-statement {
max-width: 1280px;
margin: 0 auto 80px;
padding-bottom: 80px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-statement .eyebrow-label { color: rgba(255,255,255,0.55); margin-bottom: 24px; }
.footer-statement .eyebrow-label::before { background: rgba(255,255,255,0.4); }
.footer-statement h3 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-style: italic;
font-size: clamp(40px, 5.5vw, 84px);
line-height: 1.02;
letter-spacing: -0.03em;
color: #fff;
margin: 0;
max-width: 18ch;
}
.footer-statement h3 em { color: var(--primary); font-style: italic; }
.footer-mega {
max-width: 1280px; margin: 60px auto 0;
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-style: italic;
font-size: clamp(80px, 18vw, 280px);
line-height: 0.9;
letter-spacing: -0.05em;
color: rgba(255,255,255,0.08);
user-select: none;
}
/* ----- PAGE HEADER premium (non-hero pages) ----- */
.page-header {
background: var(--ink);
padding: calc(var(--nav-h) + 140px) 40px 140px;
overflow: hidden;
}
.page-header::before {
background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(230,50,50,0.22) 0%, transparent 65%);
}
.page-header .eyebrow {
color: rgba(255,255,255,0.55);
font-size: 11.5px;
letter-spacing: 0.22em;
font-weight: 500;
margin-bottom: 32px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.page-header .eyebrow::before {
content: '';
width: 32px; height: 1px;
background: var(--primary);
}
.page-header h1 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-size: clamp(48px, 7vw, 112px);
line-height: 1.0;
letter-spacing: -0.035em;
max-width: 18ch;
margin: 0 auto 32px;
}
.page-header h1 em { font-style: italic; font-weight: 400; color: var(--primary); }
.page-header h1 span { color: var(--primary); font-style: italic; font-weight: 400; }
.page-header p { font-size: 18px; color: rgba(255,255,255,0.7); max-width: 640px; line-height: 1.55; }
/* ----- REVEAL upgrades ----- */
.reveal-section { opacity: 0; transform: translateY(48px); transition: opacity 1.1s var(--ease-out-expo), transform 1.1s var(--ease-out-expo); }
.reveal-section.visible { opacity: 1; transform: translateY(0); }
.stagger-item { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo); }
.stagger-item.visible { opacity: 1; transform: translateY(0); }
/* ----- About page tweaks ----- */
.about-visual {
background: var(--ink);
border-radius: 24px;
border: 1px solid rgba(255,255,255,0.06);
}
.about-content h3 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-style: italic;
font-size: clamp(28px, 3.5vw, 44px);
color: var(--primary);
letter-spacing: -0.02em;
line-height: 1.1;
}
.certifications {
background: var(--cream);
border: 1px solid var(--rule);
border-left: 3px solid var(--primary);
border-radius: 16px;
padding: 28px 28px;
}
.certifications h4 { font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.certifications li { color: #5A5F68; font-size: 15px; padding: 8px 0; }
/* ----- Contact form premium ----- */
.contact-form input, .contact-form textarea {
border: 1px solid var(--rule);
border-radius: 12px;
padding: 15px 18px;
font-size: 15px;
background: #fff;
transition: border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}
.contact-form input:hover, .contact-form textarea:hover { border-color: rgba(15,17,21,0.2); }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(230,50,50,0.08); }
.contact-form label { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--ink); }
.contact-form button {
display: inline-flex; align-items: center; gap: 14px;
padding: 16px 28px 16px 32px;
border-radius: 999px;
background: var(--ink);
font-weight: 500;
letter-spacing: 0.01em;
border: 1px solid var(--ink);
transition: transform 0.6s var(--ease-out-expo), background 0.3s ease;
align-self: flex-start;
}
.contact-form button:hover:not(:disabled) { transform: scaleX(1.03); background: var(--primary); border-color: var(--primary); }
.contact-item-icon { background: var(--ink); border-radius: 14px; }
/* ----- LOGOS / chip bar polish ----- */
.logos-bar { border-color: var(--rule); padding: 56px 40px; }
.logos-row { gap: 36px; }
.logo-chip {
border: 1px solid var(--rule);
color: var(--ink);
font-weight: 500;
font-family: 'Playfair Display', Georgia, serif;
font-size: 18px;
letter-spacing: 0;
padding: 8px 20px;
border-radius: 999px;
opacity: 1;
transition: border-color 0.35s ease, background 0.35s ease, color 0.35s ease;
}
.logo-chip:hover { border-color: var(--primary); background: var(--primary); color: #fff; }
/* ----- Accordion premium ----- */
.accordion-item { border: 1px solid var(--rule); border-radius: 16px; background: #fff; margin-bottom: 14px; }
.accordion-header { padding: 24px 28px; font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.accordion-header::after { color: var(--primary); font-weight: 300; font-size: 26px; }
.accordion-item.active { border-color: rgba(230,50,50,0.25); }
/* ----- Whatsapp polish ----- */
.whatsapp-float { box-shadow: 0 12px 36px rgba(37,211,102,0.3), 0 0 0 1px rgba(255,255,255,0.6); }
/* ----- Responsive tightening ----- */
@media (max-width: 900px) {
section { padding: 80px 20px; }
nav.site-nav .nav-cta { display: none; }
.page-header { padding: calc(var(--nav-h) + 70px) 20px 90px; }
.page-header h1 { font-size: clamp(38px, 11vw, 72px); }
.capabilities-inner { grid-template-columns: 1fr; gap: 40px; }
.manifesto p.lead { font-size: clamp(30px, 8.5vw, 56px); }
.cta-strip h2 { font-size: clamp(36px, 8vw, 56px); }
.section-heading h2, section.section-display h2 { font-size: clamp(32px, 8vw, 48px); }
.marquee-item { font-size: clamp(24px, 7vw, 40px); gap: 40px; }
.marquee-item::after { margin-left: 40px; }
.stats-bar { padding: 48px 28px; border-radius: 16px; }
.stat-item h4 { font-size: clamp(38px, 11vw, 56px); }
.footer-statement h3 { font-size: clamp(30px, 8vw, 48px); }
.footer-mega { font-size: clamp(60px, 22vw, 140px); }
.testimonial-card blockquote { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none !important; }
.project-card:hover .project-header.photo { transform: none; }
.cta-pill:hover, .hero-cta:hover, .contact-form button:hover:not(:disabled), nav.site-nav .nav-cta:hover { transform: none !important; }
}
/* ============================================================
REACH MAP — 3D electrical-blueprint visualization (about page)
============================================================ */
.reach-section {
background: #061020; /* deep navy blueprint base */
color: #E8F1FF;
padding: var(--space-section) 40px;
position: relative;
overflow: hidden;
}
.reach-section::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 55% 45% at 50% 55%, rgba(230,50,50,0.10) 0%, transparent 70%),
radial-gradient(ellipse 80% 100% at 50% 100%, rgba(121,192,255,0.05), transparent 70%);
pointer-events: none;
}
.reach-section::after {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(121,192,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(121,192,255,0.04) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 85%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 85%);
pointer-events: none;
}
.reach-intro {
max-width: 900px;
margin: 0 auto 56px;
text-align: center;
position: relative;
z-index: 2;
}
.reach-intro .eyebrow-label {
color: rgba(255,255,255,0.58);
margin-bottom: 22px;
}
.reach-intro .eyebrow-label::before { background: rgba(255,255,255,0.4); }
.reach-intro h2 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-size: clamp(36px, 5.5vw, 72px);
line-height: 1.02;
letter-spacing: -0.03em;
color: #fff;
margin: 0 0 22px;
text-align: center;
}
.reach-intro h2 em { font-style: italic; font-weight: 400; color: var(--primary); }
.reach-intro p {
color: rgba(255,255,255,0.68);
font-size: 17px;
max-width: 680px;
margin: 0 auto;
line-height: 1.55;
}
.reach-map-viewport {
max-width: 1000px;
margin: 0 auto;
position: relative;
z-index: 3;
border: 1px solid rgba(121,192,255,0.28);
border-radius: 14px;
overflow: hidden;
background: #040A15;
box-shadow:
0 40px 80px rgba(0,0,0,0.55),
0 0 60px rgba(121,192,255,0.04),
inset 0 0 0 1px rgba(255,255,255,0.03);
}
.reach-window-chrome {
display: flex;
align-items: center;
gap: 18px;
padding: 11px 18px;
background: linear-gradient(180deg, rgba(14,28,48,0.95), rgba(6,16,32,0.92));
border-bottom: 1px solid rgba(121,192,255,0.18);
font-family: 'Inter', sans-serif;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
position: relative;
z-index: 5;
}
.chrome-dots { display: inline-flex; gap: 6px; flex-shrink: 0; }
.chrome-dots span {
width: 9px; height: 9px;
border-radius: 50%;
background: rgba(121,192,255,0.22);
}
.chrome-dots span:first-child {
background: var(--primary);
box-shadow: 0 0 8px rgba(230,50,50,0.6);
}
.chrome-dots span:nth-child(2) { background: rgba(121,192,255,0.45); }
.chrome-title {
font-weight: 600;
color: rgba(200,225,255,0.9);
flex: 1;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chrome-coord {
font-family: 'Inter', monospace;
color: rgba(121,192,255,0.7);
letter-spacing: 0.16em;
flex-shrink: 0;
}
.reach-map-canvas {
position: relative;
width: 100%;
height: 480px;
overflow: hidden;
background: #040A15;
}
.reach-map-gl {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.reach-map-gl canvas { outline: none !important; }
.maplibregl-ctrl-group {
background: rgba(6,16,32,0.85) !important;
border: 1px solid rgba(121,192,255,0.25) !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}
.maplibregl-ctrl-group button { filter: invert(0.9) hue-rotate(180deg); }
.maplibregl-ctrl-attrib { display: none !important; }
.reach-overlay {
position: absolute;
inset: 0;
pointer-events: none;
width: 100%;
height: 100%;
overflow: visible;
z-index: 5;
}
.reach-overlay .reach-arc {
fill: none;
stroke: #FF3333;
stroke-width: 2.2;
stroke-linecap: round;
opacity: 0.95;
filter: drop-shadow(0 0 6px rgba(230,50,50,0.85)) drop-shadow(0 0 16px rgba(230,50,50,0.35));
}
.reach-overlay .reach-pulse {
fill: #fff;
filter: drop-shadow(0 0 10px rgba(255,255,255,1)) drop-shadow(0 0 20px rgba(230,50,50,0.9));
}
.reach-overlay .reach-pulse-sub { fill: #FFDCDC; opacity: 0.8; }
.reach-attribution {
position: absolute;
bottom: 6px; left: 10px;
font-family: 'Inter', sans-serif;
font-size: 9px;
font-weight: 500;
color: rgba(121,192,255,0.45);
letter-spacing: 0.12em;
pointer-events: none;
z-index: 6;
}
/* HTML markers placed by Maplibre on the map */
.reach-mk {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
pointer-events: auto;
color: #fff;
font-family: 'Inter', sans-serif;
cursor: default;
transform-origin: center bottom;
}
.reach-mk .mk-halo {
position: absolute;
top: 0; left: 50%;
width: 56px; height: 56px;
margin: -10px 0 0 -28px;
border-radius: 50%;
border: 1px dashed rgba(121,192,255,0.55);
background: rgba(121,192,255,0.04);
pointer-events: none;
}
.reach-mk .mk-ping {
position: absolute;
top: 0; left: 50%;
width: 22px; height: 22px;
margin: 7px 0 0 -11px;
border-radius: 50%;
background: rgba(230,50,50,0.35);
animation: reach-ping 2.6s infinite cubic-bezier(0.19, 1, 0.22, 1);
pointer-events: none;
}
.reach-mk .mk-box {
position: relative;
width: 20px; height: 20px;
background: rgba(6,16,32,0.92);
border: 1px solid rgba(200,225,255,0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.reach-mk .mk-box span {
position: absolute;
width: 5px; height: 1px;
background: rgba(200,225,255,0.7);
}
.reach-mk .mk-box span:nth-child(1) { top: -1px; left: -1px; transform: rotate(45deg); transform-origin: 0 0; }
.reach-mk .mk-box span:nth-child(2) { top: -1px; right: -1px; transform: rotate(-45deg); transform-origin: 100% 0; }
.reach-mk .mk-box span:nth-child(3) { bottom: -1px; left: -1px; transform: rotate(-45deg); transform-origin: 0 100%; }
.reach-mk .mk-box span:nth-child(4) { bottom: -1px; right: -1px; transform: rotate(45deg); transform-origin: 100% 100%; }
.reach-mk .mk-box i {
width: 6px; height: 6px;
background: var(--primary);
border-radius: 50%;
box-shadow: 0 0 5px rgba(230,50,50,0.95);
}
.reach-mk .mk-label {
margin-top: 8px;
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-size: 15px;
letter-spacing: 0;
white-space: nowrap;
text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.8);
}
.reach-mk .mk-sublabel {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.24em;
color: rgba(121,192,255,0.9);
text-transform: uppercase;
white-space: nowrap;
margin-top: 2px;
text-shadow: 0 2px 6px rgba(0,0,0,0.9);
}
/* HQ — larger with R-PRO badge */
.reach-mk-hq .mk-halo {
width: 90px; height: 90px;
margin: -30px 0 0 -45px;
border-color: rgba(230,50,50,0.6);
background: rgba(230,50,50,0.08);
}
.reach-mk-hq .mk-ping {
width: 40px; height: 40px;
margin: -4px 0 0 -20px;
background: rgba(230,50,50,0.5);
animation-duration: 2s;
}
.reach-mk-hq .mk-hq-frame {
position: relative;
width: 34px; height: 52px;
padding: 3px;
background: rgba(6,16,32,0.95);
border: 1px solid rgba(200,225,255,0.95);
z-index: 3;
box-shadow: 0 0 0 2px rgba(6,16,32,0.5), 0 0 20px rgba(230,50,50,0.35);
}
.reach-mk-hq .mk-hq-badge {
width: 100%; height: 100%;
background: linear-gradient(180deg, #E63232, #B51F1F);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: 'Playfair Display', Georgia, serif;
font-size: 22px;
font-weight: 700;
line-height: 1;
box-shadow: inset 0 0 8px rgba(0,0,0,0.25);
}
.reach-mk-hq .mk-hq-badge span {
font-size: 6px;
font-weight: 600;
letter-spacing: 2px;
margin-top: 3px;
opacity: 0.95;
}
.reach-mk-hq .mk-label {
margin-top: 10px;
font-size: 17px;
letter-spacing: 0.02em;
}
.reach-mk-hq .mk-sublabel { color: #FFB8B8; letter-spacing: 0.28em; }
.reach-scene {
transform: rotateX(calc(42deg + (var(--my, 0) * 14deg))) rotateZ(calc(-5deg + (var(--mx, 0) * -12deg)));
transform-origin: 50% 55%;
transform-style: preserve-3d;
transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.2, 1);
will-change: transform;
padding: 10px 0;
}
.reach-map {
width: 100%;
height: auto;
display: block;
overflow: visible;
filter: drop-shadow(0 60px 80px rgba(0,0,0,0.75));
}
/* Construction lines (diagonals, cross, reference circle) */
.bp-construction line { stroke: rgba(121,192,255,0.15); stroke-width: 0.5; stroke-dasharray: 2 4; }
.bp-construction-circle { fill: none; stroke: rgba(121,192,255,0.18); stroke-width: 0.8; stroke-dasharray: 4 6; }
.bp-construction-dot { fill: rgba(121,192,255,0.55); }
/* Coordinate rulers on the edges */
.bp-rulers text {
font-family: 'Inter', sans-serif;
font-size: 9px;
font-weight: 600;
fill: rgba(121,192,255,0.65);
letter-spacing: 0.15em;
}
.bp-tick { stroke: rgba(121,192,255,0.55); stroke-width: 0.8; }
/* DR country outline — schematic, sharp */
.country-fill {
fill: rgba(121,192,255,0.045);
}
.country-outline {
fill: none;
stroke: rgba(200,225,255,0.75);
stroke-width: 1.4;
stroke-linejoin: round;
stroke-linecap: round;
filter: drop-shadow(0 0 4px rgba(121,192,255,0.25));
}
/* Interior features — mountains, rivers, corridors */
.bp-features path { fill: none; stroke-linecap: round; }
.feature-mountain { stroke: rgba(121,192,255,0.38); stroke-width: 1; stroke-dasharray: 8 3 2 3; }
.feature-river { stroke: rgba(121,192,255,0.28); stroke-width: 0.8; stroke-dasharray: 4 5; }
.feature-road { stroke: rgba(230,50,50,0.22); stroke-width: 1; stroke-dasharray: 1 4; }
/* Arcs — four variants (PP, N, C, S) — bright warm energy against cool blueprint */
.arc {
fill: none;
stroke-width: 2.2;
stroke-linecap: round;
filter: drop-shadow(0 0 5px rgba(230,50,50,0.75)) drop-shadow(0 0 18px rgba(230,50,50,0.35));
}
.arc-pp { stroke: url(#arcGrad-pp); }
.arc-n { stroke: url(#arcGrad-n); }
.arc-c { stroke: url(#arcGrad-c); }
.arc-s { stroke: url(#arcGrad-s); }
/* Arc labels — drafting style */
.arc-labels .arc-label {
font-family: 'Inter', sans-serif;
font-size: 9px;
font-weight: 600;
fill: rgba(255,160,160,0.5);
letter-spacing: 0.15em;
text-anchor: middle;
}
/* Pulsing dots that travel along each arc */
.pulse-dot {
fill: #fff;
filter: drop-shadow(0 0 8px rgba(255,255,255,1)) drop-shadow(0 0 18px rgba(230,50,50,0.9));
}
.pulse-dot.pulse-sub { fill: #FFD8D8; opacity: 0.8; }
/* Junction (city) markers — blueprint terminal-block style */
.junction .halo {
fill: rgba(121,192,255,0.04);
stroke: rgba(121,192,255,0.35);
stroke-width: 0.6;
stroke-dasharray: 2 3;
}
.junction .ping {
fill: rgba(230,50,50,0.28);
transform-origin: center;
transform-box: fill-box;
animation: reach-ping 2.6s infinite cubic-bezier(0.19, 1, 0.22, 1);
}
.jx-box rect {
fill: rgba(6,16,32,0.9);
stroke: rgba(200,225,255,0.9);
stroke-width: 1;
}
.jx-box line {
stroke: rgba(200,225,255,0.7);
stroke-width: 0.6;
}
.jx-box .dot {
fill: var(--primary);
filter: drop-shadow(0 0 4px rgba(230,50,50,0.9));
}
.junction .lbl {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-size: 17px;
fill: #fff;
text-anchor: middle;
letter-spacing: 0;
}
.junction .sublbl {
font-family: 'Inter', sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.28em;
fill: rgba(121,192,255,0.85);
text-anchor: middle;
}
/* HQ junction — larger, with R-PRO badge inside a double-frame */
.junction-hq .halo-hq {
fill: rgba(230,50,50,0.10);
stroke: rgba(230,50,50,0.55);
stroke-width: 1;
stroke-dasharray: 3 4;
}
.junction-hq .ping-hq { fill: rgba(230,50,50,0.45); animation-duration: 2s; }
.hq-frame rect {
fill: rgba(6,16,32,0.9);
stroke: rgba(200,225,255,0.95);
stroke-width: 1;
}
.hq-frame .hq-inner {
fill: none;
stroke: rgba(200,225,255,0.5);
stroke-width: 0.6;
stroke-dasharray: 2 2;
}
.junction-hq .hq-badge {
fill: url(#hqBadge);
stroke: #fff;
stroke-width: 0.8;
filter: drop-shadow(0 0 10px rgba(230,50,50,0.85));
}
.junction-hq .hq-r {
font-family: 'Playfair Display', Georgia, serif;
font-size: 24px;
font-weight: 700;
fill: #fff;
text-anchor: middle;
}
.junction-hq .hq-pro {
font-family: 'Playfair Display', Georgia, serif;
font-size: 6.5px;
font-weight: 600;
fill: #fff;
text-anchor: middle;
letter-spacing: 2px;
}
.junction-hq .lbl-hq {
font-family: 'Playfair Display', Georgia, serif;
font-size: 20px;
font-weight: 500;
letter-spacing: 0.04em;
fill: #fff;
}
.junction-hq .sublbl-hq { fill: #FFB8B8; letter-spacing: 0.3em; font-size: 10px; }
.junction-hq .coord-hq {
font-family: 'Inter', monospace;
font-size: 9px;
font-weight: 500;
fill: rgba(121,192,255,0.7);
text-anchor: middle;
letter-spacing: 0.15em;
}
/* Compass rose */
.bp-compass .cmp-ring {
fill: rgba(6,16,32,0.6);
stroke: rgba(121,192,255,0.45);
stroke-width: 0.8;
}
.bp-compass .cmp-ring-inner { stroke-dasharray: 2 3; }
.bp-compass .cmp-needle {
fill: none;
stroke: rgba(200,225,255,0.8);
stroke-width: 0.8;
}
.bp-compass .cmp-needle-n {
fill: var(--primary);
filter: drop-shadow(0 0 4px rgba(230,50,50,0.8));
}
.bp-compass line { stroke: rgba(121,192,255,0.6); stroke-width: 0.8; }
.bp-compass .cmp-label {
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 700;
fill: rgba(200,225,255,0.85);
text-anchor: middle;
letter-spacing: 0.1em;
}
.bp-compass .cmp-n { fill: var(--primary); }
/* Title block (engineering drawing) */
.bp-titleblock .tb-frame {
fill: rgba(6,16,32,0.75);
stroke: rgba(200,225,255,0.6);
stroke-width: 0.8;
}
.bp-titleblock .tb-rule { stroke: rgba(200,225,255,0.5); stroke-width: 0.6; }
.bp-titleblock .tb-h {
font-family: 'Playfair Display', Georgia, serif;
font-size: 12px;
font-weight: 600;
fill: #fff;
letter-spacing: 0.08em;
}
.bp-titleblock .tb-m {
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 600;
fill: rgba(200,225,255,0.9);
letter-spacing: 0.18em;
}
.bp-titleblock .tb-sm {
font-family: 'Inter', sans-serif;
font-size: 8px;
font-weight: 500;
fill: rgba(121,192,255,0.65);
letter-spacing: 0.18em;
}
/* Legend */
.bp-legend .lg-frame {
fill: rgba(6,16,32,0.75);
stroke: rgba(200,225,255,0.55);
stroke-width: 0.7;
}
.bp-legend .lg-title {
font-family: 'Inter', sans-serif;
font-size: 9px;
font-weight: 700;
fill: rgba(200,225,255,0.9);
letter-spacing: 0.22em;
}
.bp-legend .lg-item {
font-family: 'Inter', sans-serif;
font-size: 9px;
font-weight: 500;
fill: rgba(200,225,255,0.78);
letter-spacing: 0.12em;
}
.bp-legend .lg-arc { stroke: var(--primary); stroke-width: 2; }
.bp-legend .lg-road { stroke: rgba(121,192,255,0.6); stroke-width: 1; stroke-dasharray: 1 3; }
.bp-legend .lg-dot { fill: var(--primary); }
.bp-legend .lg-hq { fill: var(--primary); stroke: #fff; stroke-width: 0.5; }
@keyframes reach-ping {
0% { transform: scale(1); opacity: 0.7; }
80% { transform: scale(4); opacity: 0; }
100% { transform: scale(4); opacity: 0; }
}
.reach-hint {
text-align: center;
margin-top: 20px;
color: rgba(255,255,255,0.4);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 500;
}
/* Mobile — flatten the tilt, shrink the window */
@media (max-width: 900px) {
.reach-scene { transform: rotateX(28deg) rotateZ(-3deg); padding: 0; }
.reach-map-canvas { height: 340px; }
.reach-window-chrome { padding: 8px 12px; font-size: 9px; gap: 10px; }
.chrome-coord { display: none; }
.chrome-title { font-size: 9px; letter-spacing: 0.16em; }
.reach-intro { margin-bottom: 32px; }
.junction .lbl { font-size: 22px; }
.junction .sublbl { font-size: 11px; }
.junction-hq .lbl-hq { font-size: 24px; }
.junction-hq .sublbl-hq { font-size: 12px; }
.bp-rulers text { font-size: 11px; }
.arc-labels .arc-label { font-size: 10px; }
.bp-legend, .bp-titleblock { display: none; }
.reach-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.junction .ping, .junction-hq .ping-hq { animation: none; opacity: 0.2; }
.pulse-dot { display: none; }
.reach-scene { transition: none; }
}