/* --- Performance: remove @import chains by inlining tiny base CSS ---
This file now contains:
1) @font-face declarations (previously in fonts.css)
2) Design tokens (previously in tokens.css)
3) Button utilities (previously in components/_buttons.css)
Keeping everything in one stylesheet eliminates render‑blocking @import hops. */
/* 1) Fonts (from assets/css/fonts.css) */
/* PP Telegraf Ultralight (200 weight) */
@font-face {
font-family: 'PP Telegraf';
src: url('/assets/fonts/PPTelegraf-Ultralight.woff2') format('woff2');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'PP Telegraf';
src: url('/assets/fonts/PPTelegraf-UltralightOblique.woff2') format('woff2');
font-weight: 200;
font-style: italic;
font-display: swap;
}
/* PP Telegraf Regular (300-500 weight range) */
@font-face {
font-family: 'PP Telegraf';
src: url('/assets/fonts/PPTelegraf-Regular.woff2') format('woff2');
font-weight: 300 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'PP Telegraf';
src: url('/assets/fonts/PPTelegraf-RegularOblique.woff2') format('woff2');
font-weight: 300 500;
font-style: italic;
font-display: swap;
}
/* PP Telegraf Ultrabold (600-800 weight range) */
@font-face {
font-family: 'PP Telegraf';
src: url('/assets/fonts/PPTelegraf-Ultrabold.woff2') format('woff2');
font-weight: 600 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'PP Telegraf';
src: url('/assets/fonts/PPTelegraf-UltraboldOblique.woff2') format('woff2');
font-weight: 600 800;
font-style: italic;
font-display: swap;
}
/* 2) Design tokens (from assets/css/tokens.css) */
:root {
/* Typographic scale */
--type-display: clamp(64px, 8vw, 120px);
--type-h1: 48px;
--type-h2: 36px;
--type-h3: 28px;
--type-h4: 24px;
--type-h2-small: 32px;
--type-h1-large: 42px;
--type-lead: 20px;
--type-body: 16px;
--type-small: 14px;
/* Font weight tokens - map to variable font axes where possible */
--fw-thin: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
/* Map extrabold to 700 to stay within the variable font's supported range (200–700) */
--fw-extrabold: 700;
/* Colour tokens */
--color-primary: #73AB3B;
--color-secondary: #1a450e;
--color-text: #ffffff;
--text-secondary: #b0b0b0;
--color-danger: #ff6666;
--color-danger-dark: #ff4444;
/* RGB tokens for use with rgba(var(--...-rgb), alpha) to keep alpha values flexible */
--color-danger-rgb: 255, 102, 102;
--color-danger-dark-rgb: 255, 68, 68;
/* Additional tokens consolidated from other blocks */
--dark: #0a0a0a;
--dark-gray: #1a1a1a;
--light-gray: #2a2a2a;
--faq-accent: var(--color-primary);
--font-primary: 'PP Telegraf', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
/* Spacing tokens (section paddings) */
/* Standardised vertical rhythm for page sections so headings align across pages */
--space-section-top: 64px;
--space-section-bottom: 64px;
}
/* Utility classes (semantic, small, composable) */
.type-display { font-size: var(--type-display); }
.type-h1 { font-size: var(--type-h1); }
.type-h2 { font-size: var(--type-h2); }
.type-h3 { font-size: var(--type-h3); }
.type-h4 { font-size: var(--type-h4); }
.type-h2-small { font-size: var(--type-h2-small); }
.type-h1-large { font-size: var(--type-h1-large); }
.type-lead { font-size: var(--type-lead); }
.type-body { font-size: var(--type-body); }
.type-small { font-size: var(--type-small); }
.fw-thin { font-weight: var(--fw-thin); }
.fw-regular { font-weight: var(--fw-regular); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-muted { color: var(--text-secondary); }
.text-danger { color: var(--color-danger); }
/* Unified highlight utility used across components/pages */
.hl-accent { color: var(--color-text, #ffffff); font-weight: inherit; font-size: inherit; }
/* 3) Buttons (from assets/css/components/_buttons.css) */
.btn,
button,
a.button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
display: inline-block;
padding: 12px 24px;
border-radius: 9999px; /* pill shape */
text-decoration: none;
color: #ffffff;
background: linear-gradient(135deg, rgba(10,10,10,0.75) 0%, rgba(10,10,10,0.45) 50%, rgba(115,171,59,0.18) 100%);
border: 1px solid rgba(255,255,255,0.06);
font-weight: var(--fw-medium);
font-family: var(--font-primary);
font-size: var(--type-body);
box-shadow: 0 6px 20px rgba(0,0,0,0.45);
transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
appearance: none;
-webkit-appearance: none;
line-height: 1;
cursor: pointer;
}
a.btn,
a.btn:link,
a.btn:visited { color: #ffffff; text-decoration: none; }
a.btn:hover,
a.btn:focus { text-decoration: none; }
.btn--primary {
background-image:
linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%),
linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
color: var(--color-text);
border: 1px solid var(--color-primary);
}
.btn--green {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
color: var(--color-text);
border: 1px solid var(--color-primary);
}
a.btn.btn--primary:link,
a.btn.btn--primary:visited,
a.btn.btn--green:link,
a.btn.btn--green:visited { color: var(--color-text); text-decoration: none; }
.btn--primary:hover,
.btn--green:hover {
transform: translateY(-2px);
filter: brightness(0.88);
box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}
.btn--ghost {
background-image:
linear-gradient(135deg, rgba(115,171,59,0.28) 0%, rgba(139,195,74,0.18) 100%),
linear-gradient(135deg, #0c0c0c 0%, #171717 50%, #202020 100%);
background-size: 200% 200%, 100% 100%;
background-position: 0% 50%, 0% 50%;
color: var(--color-text);
border: 1px solid var(--color-primary);
}
.btn--ghost:hover,
.btn--ghost:focus {
background-position: 100% 50%, 0% 50%;
transform: translateY(-2px);
filter: brightness(0.98);
box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}
a.btn.btn--ghost:link,
a.btn.btn--ghost:visited { color: var(--color-text); text-decoration: none; }
.btn:active,
.btn--primary:active,
.btn--green:active { transform: translateY(0); }
.hero {
min-height: 100vh;
display: flex;
}
.hero-content {
max-width: 1200px;
text-align: center;
}
.hero h1 {
/* Use the display token for the hero to ensure it's the most prominent heading.
The token is responsive (clamped) and easy to tweak in one place. */
font-size: var(--type-display);
/* Prefer weight tokens within the variable font range */
font-weight: var(--fw-bold);
margin-bottom: 20px;
line-height: 1.05;
}
/* Buttons migrated to components/_buttons.css */
.credibility-bar {
background:
radial-gradient(circle at 20% 50%, rgba(115, 171, 59, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(139, 195, 74, 0.1) 0%, transparent 50%),
linear-gradient(rgba(10, 10, 10, 0.85), rgba(10, 10, 10, 0.85));
}
.credibility-title {
font-size: var(--type-h2);
margin-bottom: 30px;
}
.credibility-logos {
display: flex;
justify-content: center;
}
.logo-item {
flex-shrink: 0;
}
.logo-item img {
height: 60px;
width: auto;
}
.section-header {
text-align: center;
/* Uniform space below titles across sections */
margin: 0 auto 28px;
}
.section-header h2 {
font-size: var(--type-h2);
margin-bottom: 12px;
line-height: 1.08;
}
.section-header p {
font-size: var(--type-lead);
color: var(--text-secondary);
}
.ideal-for {
font-size: var(--type-small);
color: var(--color-secondary);
}
.contact {
padding: 80px 5%;
background: var(--dark); /* pure black page section */
}
.contact-content {
max-width: 800px;
margin: 0 auto;
}
.contact-form {
margin-top: 40px;
display: grid;
}
.form-group {
display: grid;
gap: 10px;
}
.form-group label {
color: var(--text-secondary);
font-weight: 500;
}
.form-group input,
.form-group textarea,
.form-group select {
background: var(--light-gray);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
}
.privacy-notice {
text-align: center;
margin: 20px 0;
}
.privacy-notice p {
color: var(--text-secondary);
margin: 0;
}
.footer {
padding: 40px 5%;
background: var(--dark);
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
}
.footer-links {
display: flex;
justify-content: center;
}
.footer-links a {
color: var(--text-secondary);
text-decoration: none;
}
/* tokens and fonts are already inlined at the top of this file */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-primary);
background: var(--dark);
color: var(--color-text);
line-height: 1.6;
overflow-x: hidden;
font-feature-settings: 'kern' 1, 'liga' 1;
text-rendering: optimizeLegibility;
hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
}
/* Accessibility utility: keep labels for screen readers while visually hiding */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 1px 1px);
clip-path: inset(50%);
white-space: nowrap; border: 0;
}
/* Hyphenation utilities */
.no-hyphens { hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; }
.hyphenate { hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; }
.nowrap { white-space: nowrap; }
/* Global typographic defaults using tokens */
html, body {
font-size: var(--type-body);
}
h1 { font-size: var(--type-h1); font-weight: var(--fw-bold); line-height: 1.12; }
h2 { font-size: var(--type-h2); font-weight: var(--fw-semibold); line-height: 1.15; }
h3 { font-size: var(--type-h3); font-weight: var(--fw-medium); line-height: 1.2; }
/* Add baseline styles for remaining heading levels to ensure consistent typography */
h4 { font-size: var(--type-h4); font-weight: var(--fw-medium); line-height: 1.2; }
h5 { font-size: var(--type-h4); font-weight: var(--fw-regular); line-height: 1.25; }
h6 { font-size: var(--type-body); font-weight: var(--fw-regular); letter-spacing: 0.02em; text-transform: none; line-height: 1.3; }
/* Ensure no element can cause horizontal overflow */
* {
max-width: 100%;
}
html {
overflow-x: hidden;
}
/* Scroll behavior defaults: disable global smooth scrolling so full-page navigations and history restores present pages instantly.
Components that require smooth in-page scrolling can opt-in by adding the `smooth-scroll` class to a container (for example: ).
*/
html {
scroll-behavior: auto;
}
/* Opt-in utility: apply smooth scrolling when components explicitly need it */
.smooth-scroll, .smooth-scroll * {
scroll-behavior: smooth;
}
/* Navigation */
nav {
position: fixed;
width: 100%;
padding: 20px 5%;
background: rgba(10, 10, 10, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
transition: all 0.3s ease;
}
/* Header component container - prevent layout shift during loading */
[data-component="navbar"] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px; /* Reserve space for the header */
z-index: 1000;
}
/* Ensure body has padding to account for fixed header */
body {
padding-top: 80px;
}
/* Contact page: remove extra top spacing so the hero/header and form are fully visible when navigated */
/* Ensure contact heading clears the fixed navbar */
.page-contact .contact {
/* Ensure consistent top spacing while clearing the fixed navbar */
padding-top: calc(var(--space-section-top));
}
@media (max-width: 768px) {
.page-contact .contact { padding-top: calc(var(--space-section-top)); }
}
@media (max-width: 480px) {
.page-contact .contact { padding-top: calc(var(--space-section-top) - 8px); }
}
nav.scrolled {
padding: 15px 5%;
box-shadow: 0 2px 20px rgba(115, 171, 59, 0.1);
}
.nav-container {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
max-width: 1400px;
margin: 0 auto;
position: relative;
width: 100%;
height: 80px; /* ensure internal alignment reference */
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
z-index: 1003; /* above mobile nav overlay */
order: 0;
/* fixed-size touch target so internal bars can be absolutely positioned */
width: 44px;
height: 44px;
padding: 0;
background: transparent;
border: none;
align-items: center;
justify-content: center;
}
.hamburger span {
/* absolutely position bars in the center of the touch target */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 26px;
height: 3px;
background: var(--color-text);
margin: 0;
transition: transform 0.22s cubic-bezier(.2,.9,.2,1), opacity 0.18s, background 0.18s;
border-radius: 2px;
pointer-events: none; /* ensure button handles clicks */
transform-origin: center center;
display: block;
}
/* Default stacked positions when menu is closed */
.hamburger span:nth-child(1) {
transform: translate(-50%, calc(-50% - 8px));
}
.hamburger span:nth-child(2) {
transform: translate(-50%, -50%);
}
.hamburger span:nth-child(3) {
transform: translate(-50%, calc(-50% + 8px));
}
.hamburger.active span:nth-child(1) {
/* top bar: rotate to form X (centered) */
transform: translate(-50%, -50%) rotate(45deg);
background: var(--color-primary);
}
.hamburger.active span:nth-child(1), .hamburger.active span:nth-child(3) {
/* ensure bars overlap perfectly when forming X */
margin: 0;
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
/* bottom bar: rotate to form X (centered) */
transform: translate(-50%, -50%) rotate(-45deg);
background: var(--color-primary);
}
.hamburger.active span {
background: var(--color-primary) !important; /* ensure visible when transformed */
}
/* Show a circular backdrop when active so the X stays visible on dark overlays */
.hamburger.active {
background: rgba(255,255,255,0.03);
border-radius: 8px;
/* keep transforms consistent to avoid jumping */
transform: translateY(-50%) scale(1);
box-shadow: 0 4px 18px rgba(0,0,0,0.45);
padding: 10px 10px; /* keep horizontal padding but preserve vertical layout */
}
.logo {
font-size: var(--type-h3);
font-weight: var(--fw-bold);
background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
grid-column: 1;
justify-self: start;
}
.logo img {
height: 40px;
width: auto;
}
/* Ensure logo link is clickable on mobile */
.logo a {
display: block;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
z-index: 1001;
position: relative;
}
/* Mobile-specific logo touch handling */
@media (max-width: 768px) {
.logo a {
padding: 10px;
margin: -10px;
min-height: 44px;
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
}
}
.nav-links {
display: flex;
gap: 40px;
list-style: none;
grid-column: 2;
justify-self: center;
}
.nav-links a {
color: var(--color-text);
text-decoration: none;
transition: color 0.3s ease;
font-weight: var(--fw-medium);
}
.nav-links a:hover {
color: var(--color-primary);
}
.nav-links a.active {
color: var(--color-primary);
font-weight: 600;
}
.nav-contact {
display: none;
}
.desktop-cta {
grid-column: 3;
justify-self: end;
}
/* CTA button styles migrated to components/_buttons.css (import moved to top) */
/* FAQ Accordion */
.faqs {
padding: 60px 5%;
background: linear-gradient(180deg, rgba(10,10,10,0.6), rgba(10,10,10,0.8));
}
.faqs .section-header p {
/* Use normal body size for the FAQ intro blurb */
font-size: var(--type-body);
}
.faqs-grid {
max-width: 1000px;
margin: 0 auto;
display: grid;
gap: 8px;
}
.faq-item {
background: #040703;
border: 1px solid rgba(255,255,255,0.06);
padding: 10px 14px;
border-radius: 8px;
}
.faq-question {
/* Make dropdown questions normal text size per request */
font-size: var(--type-body);
font-weight: 500; /* slimmer than default heading weight */
line-height: 1.35;
margin: 0; /* remove default h3 margins to tighten stack */
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
position: relative; /* allow absolute-positioned arrow */
padding-right: 48px; /* reserve space for the arrow, slimmer */
/* Prevent automatic hyphenation and ensure words wrap to the next line whole */
hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
overflow-wrap: normal; /* avoid breaking words mid-word */
word-break: normal;
}
.faq-question::after {
/* Larger arrow for better visibility and tap target */
content: '';
display: block;
width: 44px;
height: 44px;
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
transition: transform 0.18s ease, filter 0.18s ease;
background-color: var(--faq-accent);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 28px 28px; /* increase visual arrow size */
mask-image: url("data:image/svg+xml;utf8,");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 28px 28px; /* increase visual arrow size */
transform-origin: center;
}
.faq-item.open .faq-question::after {
transform: translateY(-50%) rotate(180deg);
}
.faq-answer {
margin-top: 8px;
max-height: 0;
overflow: hidden;
transition: max-height 0.32s ease, opacity 0.25s ease, color 0.25s ease;
opacity: 0;
/* Body copy size for answers */
font-size: var(--type-body);
/* Use a greenish hue for answers to respect hierarchy */
color: var(--color-primary);
}
/* Responsive: scale arrow down slightly on small screens */
@media (max-width: 480px) {
.faq-question::after {
width: 30px;
height: 30px;
right: 10px;
-webkit-mask-size: 22px 22px;
mask-size: 22px 22px;
}
}
.faq-item.open .faq-answer {
max-height: 400px; /* ample space for content */
opacity: 1;
}
/* CTA hover behavior migrated to components/_buttons.css */
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 0 5%;
background: radial-gradient(circle at 20% 50%, rgba(0, 102, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.05) 0%, transparent 50%);
overflow: hidden;
}
.hero-video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
z-index: 0;
pointer-events: none;
filter: hue-rotate(60deg) saturate(1.1);
/* Mobile video optimization */
-webkit-playsinline: true;
-webkit-background-size: cover;
background-size: cover;
/* Hardware acceleration */
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
/* Prevent video from being selectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Ensure video covers container properly */
min-width: 100%;
min-height: 100%;
}
/* Video fallback styles - Clean gradient background like 404 page */
.hero.video-fallback {
background: radial-gradient(circle at 20% 50%, rgba(0, 102, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.05) 0%, transparent 50%);
}
/* Hide video controls on all platforms */
.hero-video-background::-webkit-media-controls {
display: none !important;
}
.hero-video-background::-webkit-media-controls-panel {
display: none !important;
}
.hero-video-background::-webkit-media-controls-play-button {
display: none !important;
}
.hero-video-background::-webkit-media-controls-start-playback-button {
display: none !important;
}
/* Mobile video fallback */
@media (max-width: 768px) {
.hero-video-background {
/* Reduce opacity on mobile for better text readability */
opacity: 0.3;
/* Force hardware acceleration */
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
/* Optimize for mobile performance */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
}
/* Provide clean gradient fallback for mobile if video fails */
.hero {
background: radial-gradient(circle at 20% 50%, rgba(0, 102, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.05) 0%, transparent 50%);
} /* Enhanced fallback for when video is disabled */
.hero.video-fallback {
background: radial-gradient(circle at 20% 50%, rgba(0, 102, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.05) 0%, transparent 50%);
}
/* Ensure video doesn't cause layout shifts on mobile */
.hero-video-background {
/* Prevent zoom/scale issues on mobile */
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
/* Improve performance on mobile */
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
}
.hero-content {
max-width: 1200px;
text-align: center;
z-index: 2;
}
.hero h1 {
font-size: var(--type-display);
font-weight: var(--fw-bold);
margin-bottom: 20px;
line-height: 1.05;
}
.gradient-text {
background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.accent {
color: var(--color-primary);
}
.hero p {
font-size: var(--type-body);
color: var(--text-secondary);
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-cta {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
/* Secondary (ghost) button styles migrated to components/_buttons.css */
/* Credibility Bar */
.credibility-bar {
background:
radial-gradient(circle at 20% 50%, rgba(115, 171, 59, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(139, 195, 74, 0.1) 0%, transparent 50%),
linear-gradient(rgba(10, 10, 10, 0.85), rgba(10, 10, 10, 0.85));
background-size: cover;
background-position: center;
padding: 20px 5%;
text-align: center;
position: relative;
transition: background-image 0.3s ease-in-out;
}
/* Lazy loaded background image state */
.credibility-bar.bg-loaded {
background:
radial-gradient(circle at 20% 50%, rgba(115, 171, 59, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(139, 195, 74, 0.1) 0%, transparent 50%),
linear-gradient(rgba(10, 10, 10, 0.85), rgba(10, 10, 10, 0.85)),
url('../images/AlpineBahrainTest2.avif');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.credibility-bar::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 30%, rgba(115, 171, 59, 0.08) 0%, transparent 40%),
radial-gradient(circle at 70% 70%, rgba(139, 195, 74, 0.05) 0%, transparent 40%),
linear-gradient(45deg, transparent 30%, rgba(115, 171, 59, 0.02) 50%, transparent 70%);
z-index: 1;
}
.credibility-content {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
}
.credibility-title {
font-size: var(--type-h4);
margin-bottom: 12px;
color: var(--color-text);
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 300;
text-shadow: 0 0 15px rgba(115, 171, 59, 0.2);
}
.credibility-logos {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
flex-wrap: nowrap;
min-height: 50px;
}
.logo-item {
flex-shrink: 0;
}
.logo-item img {
height: 40px;
width: auto;
filter: brightness(0) invert(1);
display: block;
}
/* About Section */
.about {
/* Standardised top/bottom spacing using tokens */
padding: var(--space-section-top) 5% var(--space-section-bottom);
background: var(--dark-gray);
}
.about-content {
/* Keep minimal layout for the home preview; detailed subcomponents removed as legacy
(about-text, expertise-tags, about-visual, stats) */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
max-width: 1100px;
margin: 0 auto;
align-items: center;
}
.stat {
text-align: center;
}
.stat-number {
font-size: var(--type-display);
font-weight: var(--fw-bold);
color: var(--color-primary);
}
.stat-label {
color: var(--text-secondary);
}
/* Service Packages */
.packages {
padding: var(--space-section-top) 5% var(--space-section-bottom);
background: var(--dark);
}
.packages-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.package-card {
background: var(--dark-gray);
padding: 40px 30px;
border-radius: 20px;
border: 1px solid var(--light-gray);
text-align: center;
transition: all 0.3s ease;
position: relative;
}
.package-card:hover {
transform: translateY(-5px);
border-color: var(--color-primary);
}
.package-tier {
color: var(--color-primary);
font-weight: 600;
margin-bottom: 10px;
}
.package-card h3 {
font-size: var(--type-h4);
margin-bottom: 20px;
}
.package-card p {
color: var(--text-secondary);
margin-bottom: 20px;
min-height: 60px;
}
.ideal-for {
font-size: var(--type-small);
color: var(--color-secondary);
margin-top: 20px;
}
/* Contact Section */
.contact {
padding: var(--space-section-top) 5% var(--space-section-bottom);
background: var(--dark); /* match global pure black */
}
.contact-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.contact-form {
margin-top: 40px;
display: grid;
gap: 20px;
}
/* Use normal body size for the contact intro paragraph */
.contact .section-header p {
font-size: var(--type-body);
}
.form-group {
display: grid;
gap: 10px;
text-align: left;
}
.form-group label {
color: var(--text-secondary);
font-weight: 500;
}
.form-group input,
.form-group textarea,
.form-group select {
font-family: inherit; /* ensure consistent font in inputs and textarea */
background: var(--light-gray);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 15px;
border-radius: 10px;
color: var(--text);
font-size: var(--type-body);
transition: all 0.3s ease;
}
/* Placeholder color on dark UI */
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--text-secondary);
opacity: 1; /* ensure consistent across browsers */
}
/* Slightly smaller default textarea height and consistent line-height */
.contact-form textarea {
min-height: 140px;
line-height: 1.5;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--color-primary);
background: rgba(115, 171, 59, 0.05);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
/* Privacy notice in contact form */
.privacy-notice {
text-align: center;
margin: 20px 0;
padding: 15px;
background: rgba(115, 171, 59, 0.1);
border-radius: 10px;
border: 1px solid rgba(115, 171, 59, 0.2);
}
.privacy-notice p {
color: var(--text-secondary);
margin: 0;
font-size: var(--type-small);
line-height: 1.5;
}
.privacy-notice a {
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.privacy-notice a:hover {
color: var(--color-secondary);
text-decoration: underline;
}
/* Contact form submit button sizing and spacing */
.contact-form .btn[type="submit"],
.contact-form button[type="submit"] {
width: 100%;
max-width: 320px;
margin: 0 auto 0;
display: block;
}
/* Footer */
footer {
padding: 40px 5%;
background: var(--dark);
text-align: center;
border-top: 1px solid var(--light-gray);
display: flex;
justify-content: center;
align-items: center;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.footer-links a {
color: var(--text-secondary);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: var(--color-primary);
}
/* Validation Matters Section (formerly Aero Decisions) */
.validation-matters {
padding: var(--space-section-top) 5% var(--space-section-bottom);
background: var(--dark);
position: relative;
overflow: hidden;
}
.validation-matters .section-header,
.validation-matters .validation-matters-grid {
position: relative;
z-index: 1;
}
.validation-matters-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
margin-bottom: 60px;
}
.validation-matters-card {
background: #040703;
padding: 30px;
border-radius: 20px;
border: 1px solid var(--color-danger-dark);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
text-align: center;
}
.validation-matters-card:hover {
transform: translateY(-5px);
border-color: var(--color-danger);
box-shadow: 0 20px 40px rgba(var(--color-danger-dark-rgb), 0.1);
}
.validation-matters-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--color-danger-dark), var(--color-danger));
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.validation-matters-card:hover::before {
transform: translateX(0);
}
.validation-matters-icon {
width: 60px;
height: 60px;
background: linear-gradient(45deg, var(--color-danger-dark), var(--color-danger));
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--type-h3);
margin: 0 auto 20px;
}
.validation-matters-card h3 {
font-size: var(--type-h4);
margin-bottom: 15px;
color: var(--color-danger);
}
.validation-matters-card p {
color: var(--text-secondary);
line-height: 1.6;
}
/* Methodology Section */
.methodology {
padding: var(--space-section-top) 5% var(--space-section-bottom);
background: var(--dark-gray);
position: relative;
overflow: hidden;
}
.methodology .section-header,
.methodology .methodology-grid {
position: relative;
z-index: 1;
}
.methodology-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.methodology-card {
background: var(--light-gray);
padding: 40px;
border-radius: 20px;
border: 1px solid rgba(0, 102, 255, 0.2);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
text-align: center;
}
.methodology-card:hover {
transform: translateY(-5px);
border-color: var(--color-primary);
box-shadow: 0 20px 40px rgba(0, 102, 255, 0.1);
}
.methodology-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.methodology-card:hover::before {
transform: translateX(0);
}
.methodology-icon {
width: 60px;
height: 60px;
background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--type-h3);
margin: 0 auto 20px;
}
.methodology-card h3 {
font-size: var(--type-h4);
margin-bottom: 15px;
color: var(--color-text);
}
.methodology-card p {
color: var(--text-secondary);
line-height: 1.6;
}
/* Privacy Policy Page Styles */
.privacy-intro {
padding: 150px 5% 100px 5%;
background: var(--dark);
text-align: center;
}
.privacy-content {
padding: var(--space-section-top) 5% var(--space-section-bottom);
background: var(--dark-gray);
}
.privacy-text {
max-width: 900px;
margin: 0 auto;
line-height: 1.8;
}
.privacy-text h2 {
font-size: var(--type-h3);
margin-top: 40px;
margin-bottom: 20px;
color: var(--color-primary);
border-bottom: 2px solid var(--color-primary);
padding-bottom: 10px;
}
.privacy-text p {
color: var(--text-secondary);
margin-bottom: 20px;
font-size: var(--type-body);
}
.privacy-text ul {
color: var(--text-secondary);
margin: 20px 0;
padding-left: 30px;
}
.privacy-text li {
margin-bottom: 8px;
}
.privacy-text a {
color: var(--color-primary);
text-decoration: none;
transition: color 0.3s ease;
}
.privacy-text a:hover {
color: var(--color-secondary);
text-decoration: underline;
}
.privacy-text strong {
color: var(--color-text);
}
.privacy-footer {
padding: 40px 5%;
background: var(--dark);
text-align: center;
border-top: 1px solid var(--light-gray);
}
.privacy-footer p {
color: var(--text-secondary);
margin-bottom: 10px;
}
.privacy-footer p:last-child {
margin-bottom: 0;
}
/* Mobile responsive adjustments for privacy page */
@media (max-width: 768px) {
.privacy-intro {
padding: 120px 5% 80px 5%;
}
.privacy-text {
padding: 0 10px;
}
.privacy-text h2 {
font-size: var(--type-h4);
margin-top: 30px;
}
.privacy-text p {
font-size: var(--type-small);
}
.privacy-text ul {
padding-left: 20px;
}
}
/* Responsive */
@media (max-width: 768px) {
/* Contact section: tighter vertical rhythm on mobile */
.contact {
padding-top: 70px;
padding-bottom: 70px;
}
.contact .section-header {
margin-bottom: 30px;
}
.contact-form {
gap: 14px; /* reduce gaps between fields */
}
.form-group input,
.form-group textarea,
.form-group select {
padding: 12px; /* tighter control size on mobile */
}
.contact-form textarea {
min-height: 120px; /* shorter textarea on mobile */
}
.privacy-notice {
margin: 12px 0; /* reduce vertical space */
padding: 10px; /* tighter box so button is more visible */
}
/* Force all grid containers to use single column on mobile and override minimum widths */
.packages-grid,
.validation-matters-grid,
.methodology-grid {
grid-template-columns: 1fr !important;
gap: 20px;
padding: 0;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* Ensure all cards fit properly on mobile */
.package-card,
.validation-matters-card,
.methodology-card {
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
padding: 20px;
}
/* Force all sections to respect mobile width */
.packages,
.validation-matters,
.methodology,
.about,
.contact {
padding-left: 2%;
padding-right: 2%;
width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
/* Ensure hero section doesn't cause horizontal overflow */
.hero {
font-size: var(--type-lead);
width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
.hero-content {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 20px;
margin: 0;
} .nav-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.hamburger {
display: flex;
position: fixed; /* keep in viewport so it's always clickable */
left: 12px;
top: 50%;
transform: translateY(-50%);
z-index: 10050; /* well above overlays to guarantee visibility */
order: 0;
padding: 10px; /* larger hit area for mouse/touch */
min-width: 44px;
min-height: 44px;
border-radius: 8px;
background: transparent;
touch-action: manipulation;
pointer-events: auto;
}
.hamburger:hover {
/* Preserve vertical translate to avoid jumping; only scale */
transform: translateY(-50%) scale(1.06);
}
.desktop-cta {
display: none;
grid-column: unset;
justify-self: unset;
}.logo {
text-align: center;
flex: 1;
order: 1;
width: 100%;
margin: 0;
grid-column: unset;
justify-self: unset;
} .nav-links {
position: fixed !important;
top: 80px;
left: 0;
right: 0;
width: calc(100% - 40px);
max-width: 400px;
margin: 0 auto;
max-height: 0;
background: rgba(10, 10, 10, 0.98);
backdrop-filter: blur(20px);
border: 1px solid rgba(115, 171, 59, 0.2);
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
display: flex !important;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 0;
/* Using max-height for dropdown animation - alternative would be transform: scaleY() for better performance */
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, transform 0.2s ease;
z-index: 1002;
order: 2;
overflow: hidden;
list-style: none;
padding: 0;
grid-column: unset;
justify-self: unset;
opacity: 0;
transform: translateY(-10px);
pointer-events: none;
}
.nav-links.active {
max-height: 500px;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
padding: 12px 0;
}
.nav-links li {
text-align: center;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.25s ease, transform 0.25s ease;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding: 0;
}
.nav-links li:last-child {
border-bottom: none;
}
.nav-links.active li {
opacity: 1;
transform: translateY(0);
}
.nav-links.active li:nth-child(1) { transition-delay: 0.05s; }
.nav-links.active li:nth-child(2) { transition-delay: 0.08s; }
.nav-links.active li:nth-child(3) { transition-delay: 0.11s; }
.nav-links.active li:nth-child(4) { transition-delay: 0.14s; }
.nav-links.active li:nth-child(5) { transition-delay: 0.17s; }
.nav-links.active li:nth-child(6) { transition-delay: 0.2s; }
.nav-links a {
/* Compact dropdown menu items for improved space efficiency and exclusive look */
font-size: var(--type-body);
font-weight: var(--fw-medium);
line-height: 1.4;
display: block;
transition: all 0.2s ease;
text-align: center;
width: 100%;
}
/* Only non-button links get the generic styling */
.nav-links a:not(.btn) {
padding: 12px 20px;
border-radius: 0;
}
/* Ensure buttons keep pill shape inside the mobile menu */
.nav-links .btn {
border-radius: 9999px;
margin: 8px 16px;
width: calc(100% - 32px);
}
.nav-links a:not(.btn):hover {
background: rgba(115, 171, 59, 0.15);
color: var(--color-primary);
}
/* Preserve legacy styling only when not using .btn button styles */
.nav-contact:not(.btn) {
display: block;
background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
color: white !important;
padding: 12px 20px;
border-radius: 30px;
margin: 8px 16px;
transition: all 0.2s ease;
}
.nav-contact:not(.btn):hover {
background: rgba(115, 171, 59, 0.9);
box-shadow: 0 4px 12px rgba(115, 171, 59, 0.4);
}
.hero h1 {
/* On medium screens, keep the hero prominent but slightly smaller than the full display */
font-size: var(--type-h1-large);
}
.hero-cta {
flex-direction: column;
align-items: center;
}
.about-content {
grid-template-columns: 1fr;
gap: 40px;
}
.form-row {
grid-template-columns: 1fr;
}
.credibility-bar {
padding: 16px 5%;
/* Remove fixed attachment on mobile */
background-attachment: scroll;
}
.credibility-logos {
gap: 20px;
min-height: 44px;
}
.credibility-title {
font-size: var(--type-h4);
margin-bottom: 10px;
}
.logo-item img {
height: 28px;
filter: brightness(0) invert(1);
}
/* Hero section mobile optimizations */
.hero {
/* Ensure hero content is always readable on mobile */
position: relative;
min-height: 100vh;
} .hero-content {
/* Improve text readability with subtle gradient instead of heavy blur */
background: linear-gradient(145deg,
rgba(10, 10, 10, 0.15) 0%,
rgba(10, 10, 10, 0.25) 50%,
rgba(10, 10, 10, 0.15) 100%);
padding: 20px;
border-radius: 15px;
/* Much lighter blur effect */
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px); /* Add subtle border for definition */
border: 1px solid rgba(255, 255, 255, 0.1);
} /* Footer mobile optimization - two rows */
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 15px 5px;
max-width: 450px;
margin: 0 auto 20px auto;
}
.footer-links a {
font-size: var(--type-small);
text-align: center;
padding: 8px 3px;
line-height: 1.2;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 calc(25% - 5px);
min-width: 80px;
}
}
@media (max-width: 480px) {
/* Additional mobile-specific overrides for very small screens */
.packages,
.validation-matters,
.methodology,
.about,
.contact,
.hero {
padding-left: 1%;
padding-right: 1%;
margin: 0;
width: 100%;
max-width: 100vw;
overflow-x: hidden;
box-sizing: border-box;
}
/* Ensure all content containers respect screen width */
.packages-grid,
.validation-matters-grid,
.methodology-grid,
.about-content,
.contact-content,
.hero-content {
width: 100%;
max-width: 100%;
margin: 0;
padding: 10px;
box-sizing: border-box;
}
/* Override any potential width issues */
.package-card,
.validation-matters-card,
.methodology-card {
margin: 0 0 15px 0;
padding: 15px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.nav-links {
width: calc(100% - 20px);
max-width: 360px;
}
.nav-links a {
/* Keep menu items readable on small phones */
font-size: var(--type-small);
}
.nav-links a:not(.btn) {
padding: 10px 16px;
}
.nav-contact {
padding: 10px 16px;
font-size: var(--type-small);
}
.logo {
margin: 0 50px; /* Adjust margin for smaller screens */
}
.logo img {
height: 35px;
}
nav {
padding: 15px 5%;
}
.hamburger {
left: 12px; /* Adjust hamburger position for smaller screens */
z-index: 10050; /* ensure still above the overlay on very small screens */
padding: 10px;
min-width: 44px;
min-height: 44px;
position: fixed;
top: 50%;
transform: translateY(-50%);
}
/* Make sure the mobile nav overlay doesn't capture pointer events over the hamburger */
.nav-links {
pointer-events: auto;
}
.credibility-logos {
gap: 16px;
}
.credibility-title {
font-size: var(--type-h4);
letter-spacing: 1px;
}
.logo-item img {
height: 24px;
}
/* Additional mobile video optimizations */
.hero-video-background {
/* Further reduce video opacity on very small screens */
opacity: 0.2;
/* Optimize for very small screens */
object-fit: cover;
object-position: center center;
} .hero-content {
/* Slightly more prominent but still subtle background on small screens */
background: linear-gradient(145deg,
rgba(10, 10, 10, 0.2) 0%,
rgba(10, 10, 10, 0.35) 50%,
rgba(10, 10, 10, 0.2) 100%);
margin: 10px;
}
.hero h1 {
font-size: var(--type-h3);
}
.hero p {
font-size: var(--type-body);
} /* Disable video on very slow connections or very small screens if needed */
.hero.low-bandwidth .hero-video-background {
display: none;
} /* Footer optimization for very small screens */
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px 3px;
max-width: 350px;
}
.footer-links a {
font-size: var(--type-small);
padding: 6px 2px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex: 0 0 calc(33.333% - 4px);
min-width: 70px;
}
}
/* Prefers reduced motion - disable video entirely */
@media (prefers-reduced-motion: reduce) {
.hero-video-background {
display: none;
}
.hero {
background: radial-gradient(circle at 20% 50%, rgba(0, 102, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.05) 0%, transparent 50%);
}
}
/* High contrast mode optimizations */
@media (prefers-contrast: high) {
.hero-video-background {
opacity: 0.2;
filter: contrast(1.2) brightness(0.8);
}
.hero-content {
background: rgba(0, 0, 0, 0.8);
border: 2px solid rgba(255, 255, 255, 0.3);
}
}
/* Smooth Scroll Animations */
.fade-in-element {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in-element.animated {
opacity: 1;
transform: translateY(0);
}
/* Service card specific animation tuning to avoid jank/stutter on grid cards.
Use a shorter translate offset and faster timing so cards animate smoothly
without competing with per-card hover transforms. This selector is more
specific than the generic .fade-in-element rule so it will take precedence.
*/
.service-card.fade-in-element {
opacity: 0;
transform: translateY(12px);
transition-property: opacity, transform;
transition-duration: 420ms;
transition-timing-function: cubic-bezier(.2,.9,.2,1);
will-change: opacity, transform;
}
.service-card.fade-in-element.animated {
opacity: 1;
transform: translateY(0);
}
/* Category cards (used in services-section) and generic .item cards should match
the smoother animation behavior to prevent popping when images load or layout
is recalculated. Keep duration slightly faster for perceived snappiness.
*/
.category-card.fade-in-element,
.item.fade-in-element {
opacity: 0;
transform: translateY(10px);
transition-property: opacity, transform;
transition-duration: 380ms;
transition-timing-function: cubic-bezier(.2,.9,.2,1);
will-change: opacity, transform;
}
.category-card.fade-in-element.animated,
.item.fade-in-element.animated {
opacity: 1;
transform: translateY(0);
}
/* Hero content should be visible immediately */
.hero-content {
opacity: 1;
transform: translateY(0);
}
/* Staggered animation delays for service cards and similar elements */
.package-card.fade-in-element:nth-child(1) { transition-delay: 0.1s; }
.package-card.fade-in-element:nth-child(2) { transition-delay: 0.2s; }
.package-card.fade-in-element:nth-child(3) { transition-delay: 0.3s; }
.package-card.fade-in-element:nth-child(4) { transition-delay: 0.4s; }
/* Legacy animation support - keep for backwards compatibility */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Flow visualization background */
.flow-lines {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0.1;
}
.flow-line {
position: absolute;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
animation: flow 10s linear infinite;
}
@keyframes flow {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
/* Universal mobile overflow prevention */
@media (max-width: 768px) {
/* Prevent any element from causing horizontal overflow */
*, *::before, *::after {
max-width: 100vw;
box-sizing: border-box;
}
/* Ensure body and html properly constrain content */
html, body {
overflow-x: hidden;
width: 100%;
max-width: 100vw;
}
/* Force all main containers to respect viewport width */
.nav-container,
.hero-content,
.credibility-content,
.section-header,
.packages-grid,
.validation-matters-grid,
.methodology-grid,
.about-content,
.contact-content,
.footer-content {
max-width: 100vw;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: max(2%, 10px);
padding-right: max(2%, 10px);
box-sizing: border-box;
}
/* Ensure images and media don't overflow */
img, video, iframe, embed, object {
max-width: 100%;
height: auto;
}
/* Handle long text and prevent word overflow */
/* Default: wrap long words, avoid mid-word hyphenation */
h1, h2, h3, h4, h5, h6, p, div, span {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
}
/* Block hyphenation globally (long-form too) */
p, li, blockquote, figcaption, .faq-answer, .rich-text, .article-body {
hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
}
/* Explicitly disable hyphenation for UI/short text */
h1, h2, h3, h4, h5, h6,
.btn, button, nav, .nav-links a, .nav-contact,
.faq-question, label, input, textarea, select,
.logo, .hero-cta a, .section-header p.eyebrow {
hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
}
/* Ensure form elements don't overflow */
input, textarea, select, button {
max-width: 100%;
box-sizing: border-box;
}
}
/* Additional safety for very small screens */
@media (max-width: 320px) {
.hero h1 {
font-size: var(--type-h2) !important;
}
.hero p {
font-size: var(--type-small) !important;
}
.section-header h2 {
font-size: var(--type-h2-small) !important;
}
.package-card,
.validation-matters-card,
.methodology-card {
padding: 10px !important;
margin: 0 0 10px 0 !important;
}
.nav-links a {
/* Keep readability and ~44px touch target on ultra-small screens */
font-size: var(--type-h4) !important;
}
.nav-links a:not(.btn) {
padding: 14px 16px !important;
}
.nav-links .btn {
border-radius: 9999px !important;
}
}
/* Final hero size overrides (placed at file end so they win over earlier rules) */
.hero .hero-content h1 {
font-size: var(--type-display);
font-weight: var(--fw-bold);
line-height: 1.05;
}
@media (max-width: 768px) {
.hero .hero-content h1 {
font-size: var(--type-h1-large);
}
}
@media (max-width: 480px) {
.hero .hero-content h1 {
font-size: var(--type-h1-large);
}
}
/* --- reCAPTCHA v3: visually hide the badge while keeping the element present ---
Note: this keeps the grecaptcha DOM node so the site's JS (which looks for
`.grecaptcha-badge`) and reCAPTCHA functionality continue to work. If you
need to comply with Google's display rules in your region, consider adding
a visible privacy/recaptcha notice instead of fully hiding the badge. */
.grecaptcha-badge { visibility: hidden; }
/* ========================================================================
COMPONENT STYLES
Styles extracted from component HTML files for better maintainability
======================================================================== */
/* --- About Section (Homepage) --- */
/* Scoped styles for compact About preview on homepage */
.about-home { padding: var(--space-section-top) 5% var(--space-section-bottom); background: #ffffff; }
.about-home .container { max-width: 1100px; margin: 0 auto; }
.about-home header.section-header { text-align: center; margin: 0 auto 28px; max-width: 900px; }
.about-home header.section-header .eyebrow { display: inline-block; font-size: var(--type-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); background: rgba(115,171,59,0.12); border: 1px solid rgba(115,171,59,0.22); padding: 4px 8px; border-radius: 999px; margin-bottom: 10px; }
.about-home header.section-header h2 { font-size: var(--type-h2); color: var(--dark); margin: 0 0 6px; }
.about-home header.section-header h2 .accent { color: var(--color-primary); }
.about-home header.section-header .lead { color: var(--dark); font-size: var(--type-body); line-height: 1.6; opacity: 0.92; }
.about-home .summary { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 14px 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.05); }
.about-home .avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(0,0,0,0.08); background: #ffffff; }
.about-home .avatar img { width: 100%; height: 100%; object-fit: cover; }
.about-home .text { display: grid; gap: 6px; }
.about-home .text .who { font-weight: var(--fw-semibold); color: #000; }
.about-home .text .role { color: var(--dark-gray); font-size: var(--type-small); }
.about-home .text .blurb { color: var(--dark); opacity: 0.95; font-size: var(--type-body); }
/* Two-column row: summary card + subtle side image */
.about-home .row { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); gap: 18px; align-items: stretch; margin-top: 10px; }
.about-home .side-visual { position: relative; border-radius: 12px; overflow: hidden; background: #0f0f0f; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 8px 24px rgba(0,0,0,0.06); min-height: 220px; }
.about-home .side-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.95) brightness(0.9); transform: scale(1.02); transition: transform 350ms cubic-bezier(.2,.9,.2,1); }
.about-home .side-visual:hover img { transform: scale(1.05); }
/* Minimal link styling to avoid competing with primary CTAs */
.about-home .links { margin-top: 2px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.about-home .text-link { color: var(--color-primary); text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(115,171,59,0.5); }
.about-home .text-link:hover { text-decoration-color: var(--color-primary); }
.about-home .arrow { font-size: 1.1em; vertical-align: -1px; }
@media (max-width: 640px) {
.about-home { padding: var(--space-section-top) 4% var(--space-section-bottom); }
.about-home .summary { grid-template-columns: 1fr; text-align: center; }
.about-home .avatar { justify-self: center; }
.about-home .links { justify-content: center; }
.about-home .row { grid-template-columns: 1fr; }
}
/* --- About Section (Full Page) --- */
/* Scoped styles for the About section */
.about {
/* Standardised section spacing */
padding: var(--space-section-top) 5% var(--space-section-bottom);
/* Force full black background for the section */
background: #000;
/* Muted default body colour to match validation-matters */
color: #b0b0b0;
}
.about .container { max-width: 1200px; margin: 0 auto; }
.about header.section-header { text-align: center; margin: 0 auto 28px; max-width: 1000px; }
.about header.section-header .eyebrow { display: inline-block; font-size: var(--type-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); background: rgba(115,171,59,0.12); border: 1px solid rgba(115,171,59,0.22); padding: 6px 10px; border-radius: 999px; margin-bottom: 10px; }
.about header.section-header h2 { font-size: var(--type-h2); margin-bottom: 10px; color: #ffffff; }
.about header.section-header h2 .accent { color: var(--color-primary); }
.about header.section-header .lead { color: var(--text-secondary); font-size: var(--type-body); line-height: 1.65; }
.about .affiliations { display: flex; gap: 26px; justify-content: center; align-items: center; margin: 22px auto 8px; opacity: 0.9; flex-wrap: wrap; }
.about .affiliations img { height: 28px; width: auto; filter: brightness(0) invert(1) opacity(0.7); }
/* Alternating rows */
.about .rows { display: grid; gap: 22px; }
.about .section-row { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; align-items: stretch; }
.about .section-row.reverse { grid-template-columns: 0.9fr 1.1fr; }
/* Cards: use requested deep background for standalone About page */
.about .section-text { background: #040703; border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 18px 18px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); display: grid; align-content: start; }
.about .section-text h2 { font-size: var(--type-h3); color: var(--color-primary); margin: 4px 0 8px; }
.about .section-text p { color: inherit; line-height: 1.7; margin: 0; }
.about .section-text p + p { margin-top: 12px; }
/* Highlighted inline text (use ) - use global rule in styles.css */
.about .section-image { min-height: 220px; }
.about .shot { position: relative; border-radius: 12px; overflow: hidden; background: #0f0f0f; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
.about .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.95) brightness(0.9); transform: scale(1.02); transition: transform 400ms cubic-bezier(.2,.9,.2,1); }
.about .shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.35) 50%, rgba(115,171,59,0.2) 100%); pointer-events: none; }
.about .shot:hover img { transform: scale(1.06); }
.about .bio-card { background: #040703; border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.about .bio-card .avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); background: #111; }
.about .bio-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.about .bio-card .who { line-height: 1.3; }
.about .bio-card .who .name { font-weight: var(--fw-semibold); }
.about .bio-card .who .role { color: var(--text-secondary); font-size: var(--type-small); }
.about .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
/* Anim hooks match site pattern */
.anim { will-change: transform, opacity; }
/* Responsive placement helpers: duplicate the image and show/hide depending on viewport.
.mobile-only will be shown only on small screens; .desktop-only only on larger screens.
This keeps desktop layout unchanged while moving the image between cards on mobile. */
.section-image.mobile-only { display: none; }
.section-image.desktop-only { display: block; }
@media (max-width: 1024px) {
/* Keep vertical spacing consistent; tighten only horizontal padding */
.about { padding: var(--space-section-top) 4% var(--space-section-bottom); }
.about .section-row,
.about .section-row.reverse { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
/* Show the mobile-only figure in the stacked flow and hide the desktop-only copy */
.section-image.mobile-only { display: block; }
.section-image.desktop-only { display: none; }
}
@media (max-width: 640px) {
.about { padding: var(--space-section-top) 4% var(--space-section-bottom); }
.about header.section-header .lead { font-size: var(--type-small); }
.about .bio-card { grid-template-columns: 1fr; text-align: center; }
.about .bio-card .avatar { justify-self: center; }
.about .cta { justify-content: center; }
}
/* --- CTA Separator --- */
/* Local, component-scoped styles */
.cta-separator {
background: #ffffff;
color: #0a0a0a; /* do not override CSS vars to avoid affecting buttons */
padding: 40px 5%; /* slightly thicker */
border-top: 1px solid rgba(0,0,0,0.06);
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.cta-separator .container {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 18px 28px;
}
.cta-separator h3 {
/* Match section header h3 scale */
font-size: var(--type-h3);
font-weight: var(--fw-semibold);
margin: 0;
line-height: 1.2;
color: #0a0a0a;
}
.cta-separator p {
margin: 4px 0 0;
font-size: var(--type-body);
color: #333;
}
.cta-actions {
display: flex;
gap: 12px;
justify-content: flex-end;
flex-wrap: wrap;
}
/* Ensure buttons remain readable on white background */
.cta-actions .btn { box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
.cta-actions .btn--ghost { border-color: rgba(10,10,10,0.2); }
@media (max-width: 720px) {
.cta-separator .container {
grid-template-columns: 1fr;
justify-items: start;
}
.cta-actions { justify-content: start; }
}
/* Ultra-small screens: follow global h2 downscale */
@media (max-width: 320px) {
.cta-separator h3 { font-size: var(--type-h3); }
}
/* --- CTA Validation --- */
/* Reuse cta-separator styles with minor accent for validation CTA */
.cta-validation { background: #ffffff; color: #0a0a0a; padding: 40px 5%; border-top: 1px solid rgba(0,0,0,0.06); border-bottom: 1px solid rgba(0,0,0,0.06); }
.cta-validation .container { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px 28px; }
.cta-validation h3 { font-size: var(--type-h3); font-weight: var(--fw-semibold); margin: 0; line-height: 1.2; color: #0a0a0a; }
.cta-validation p { margin: 4px 0 0; font-size: var(--type-body); color: #333; }
.cta-validation .cta-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.cta-validation .btn { box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
.cta-validation .btn--ghost { border-color: rgba(10,10,10,0.2); }
@media (max-width: 720px) { .cta-validation .container { grid-template-columns: 1fr; justify-items: start; } .cta-validation .cta-actions { justify-content: start; } }
/* --- Services Section (Homepage) --- */
/* Use global rhythm for header spacing */
.section-header { margin: 0 auto 28px; }
/* Component-scoped styles to match the site's token system */
/* Reduced vertical spacing so the Services section fits on most laptop screens */
/* Remove gradients; use solid black background */
.services { padding: var(--space-section-top) 5% var(--space-section-bottom); background: #000; }
.services .container { max-width: 1200px; margin: 0 auto; }
.services .lead { max-width: 900px; margin: 0 auto 24px; text-align: center; color: var(--text-secondary); font-size: var(--type-body); line-height: 1.6; }
/* Local highlight utility (removed - using global .hl-accent) */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
/* Make each card a column-flex container and fill available grid cell height so cards are even */
/* Use the same dark gray as About cards for visual consistency */
.service-card { display: flex; flex-direction: column; background: #040703; border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 24px; box-shadow: 0 8px 30px rgba(0,0,0,0.6); transition: transform 240ms cubic-bezier(.2,.9,.2,1), box-shadow 240ms, border-color 240ms; will-change: transform; height: 100%; position: relative; }
.service-visual { height: 160px; border-radius: 8px; overflow: hidden; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; background: #111; position: relative; }
/* Gradient overlay on images to match the project's image-overlay technique */
.service-visual::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 50%, rgba(115,171,59,0.18) 100%);
transition: background 180ms ease, opacity 180ms ease;
z-index: 1;
}
.service-visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms cubic-bezier(.2,.9,.2,1); z-index: 0; }
.service-card h3 { margin: 6px 0 12px; font-size: var(--type-h3); color: var(--color-primary); display: inline-flex; align-items: center; gap: 8px; }
/* Always-visible, tiny arrow indicator to suggest clickability */
.service-card h3::after { content: "\2192"; /* → */ font-size: 0.9em; line-height: 1; color: var(--color-primary); opacity: 0.7; transform: translateX(0); transition: transform 180ms cubic-bezier(.2,.9,.2,1), opacity 180ms; }
/* Make the full-card anchors look like regular cards (no purple underlines/colour) */
a.service-card { color: inherit; text-decoration: none; cursor: pointer; }
a.service-card * { text-decoration: none; }
/* Keep strong, visible focus for keyboard users */
a.service-card:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(115,171,59,0.18); border-radius: 12px; }
/* Subtle underline on title when hovering/focusing to further imply link */
a.service-card:hover h3, a.service-card:focus h3, a.service-card:focus-within h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-primary); }
/* allow the list area to grow so cards match height and the Learn more link sits at the bottom */
.service-highlights { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; flex: 1 1 auto; }
.service-highlights li { color: var(--color-text); display: flex; gap: 12px; align-items: flex-start; }
.service-highlights li:before { content: "•"; color: var(--color-primary); font-weight: var(--fw-semibold); margin-top: 2px; }
.service-card .learn-more { display: inline-block; margin-top: 14px; text-decoration: none; color: var(--color-primary); font-weight: var(--fw-semibold); margin-top: auto; }
/* Hover and focus interactions */
.service-card:hover, .service-card:focus-within, .service-card:focus {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 18px 40px rgba(0,0,0,0.65);
}
/* Nudge arrow to the right on interaction */
.service-card:hover h3::after, .service-card:focus-within h3::after { transform: translateX(3px); opacity: 1; }
.service-card:hover .service-visual img, .service-card:focus-within .service-visual img {
transform: scale(1.06);
}
/* Keyboard focus ring for accessibility */
.service-card:focus {
outline: none;
}
/* Micro-CTA chip that appears on hover/focus with minimal footprint */
.service-card::after {
content: "View service \2192"; /* View service → */
position: absolute;
right: 12px;
bottom: 12px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
color: var(--color-primary);
font-size: 12px;
letter-spacing: .02em;
line-height: 1;
opacity: 0;
transform: translateY(4px);
transition: opacity 180ms ease, transform 180ms cubic-bezier(.2,.9,.2,1), background 180ms ease, border-color 180ms ease;
pointer-events: none; /* don't block clicks */
backdrop-filter: saturate(110%) blur(2px);
}
.service-card:hover::after, .service-card:focus::after, .service-card:focus-within::after {
opacity: 1;
transform: translateY(0);
background: rgba(115,171,59,0.12);
border-color: rgba(115,171,59,0.18);
}
@media (prefers-reduced-motion: reduce) {
.service-card, .service-visual img, .service-card h3::after, .service-card::after { transition: none; }
}
.service-card:focus-visible {
box-shadow: 0 18px 40px rgba(0,0,0,0.65), 0 0 0 4px rgba(115,171,59,0.18);
border: 1px solid rgba(115,171,59,0.12);
}
/* Muted CTA uses global .btn utilities (btn, btn--ghost) so no component-level duplication */
.services-cta { text-align: center; margin-top: 36px; }
@media (max-width: 980px) {
.service-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Tighter spacing for laptop-sized viewports */
@media (max-width: 1280px) {
.services { padding: var(--space-section-top) 4% var(--space-section-bottom); }
.services .lead { margin-bottom: 18px; }
.service-grid { gap: 20px; }
}
@media (max-width: 640px) {
.service-grid { grid-template-columns: 1fr; }
.service-visual { height: 200px; }
}
/* --- Services Section (Full Page) --- */
:root { --header-offset: 110px; }
.services-page { padding: var(--space-section-top) 5% var(--space-section-bottom); background: #000; }
.services-page .container { max-width: 1200px; margin: 0 auto; }
.services-page header.section-hero { text-align: center; margin: 0 auto 28px; max-width: 1000px; }
.services-page header.section-hero .section-header { margin: 0 auto 12px; }
.services-page header.section-hero h1 { font-size: var(--type-h2); margin-bottom: 14px; }
.services-page header.section-hero .lead { color: var(--text-secondary); font-size: var(--type-body); line-height: 1.6; }
.services-layout { display: block; }
.service-area { background: #040703; border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 22px 20px; box-shadow: 0 8px 28px rgba(0,0,0,0.5); margin-bottom: 22px; scroll-margin-top: var(--header-offset); }
.service-area h2 { color: var(--color-primary); margin: 4px 0 12px; font-size: var(--type-h3); }
.service-area .summary { color: var(--text-secondary); margin-bottom: 12px; }
.items { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.item { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; padding: 14px; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.item:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,0.5); border-color: rgba(115,171,59,0.16); }
.item h3 { font-size: var(--type-h4); margin: 2px 0 8px; }
.item p { color: var(--text-secondary); }
/* use global .hl-accent from styles.css */
.category-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 18px 0 28px; }
.category-card { position: relative; overflow: hidden; border-radius: 12px; background: #040703; min-height: 140px; display: grid; align-content: end; padding: 16px; border: 1px solid rgba(255,255,255,0.06); text-decoration: none; color: var(--color-text); transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, outline-color 160ms ease; }
.category-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: saturate(0.9) brightness(0.85); transition: transform 260ms cubic-bezier(.2,.9,.2,1), filter 220ms ease; }
.category-card .title { font-weight: var(--fw-semibold); font-size: var(--type-body); z-index: 3; position: relative; display: inline-block; padding: 8px 12px; border-radius: 8px; transition: background .18s ease, color .18s ease, transform .18s ease; }
/* Subtle inner shading layer between image (z0) and overlay (z2) */
.category-card::before { content: ""; position: absolute; inset: 8px; border-radius: 10px; background: rgba(0,0,0,0.24); z-index: 1; transition: background .18s ease, box-shadow .18s ease; pointer-events: none; }
/* Decorative overlay above the shading layer */
.category-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(115,171,59,0.18)); z-index: 2; transition: background .2s ease, opacity .2s ease; }
.category-card:hover { border-color: rgba(115,171,59,0.2); transform: translateY(-4px); box-shadow: 0 12px 22px rgba(0,0,0,0.45); }
/* Active state to make the selected card obvious */
.category-card.is-active { outline: 2px solid rgba(115,171,59,0.6); outline-offset: 0; border-color: rgba(115,171,59,0.4); box-shadow: 0 18px 36px rgba(0,0,0,0.65); transform: translateY(-2px); }
.category-card.is-active::before { background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(115,171,59,0.04)); box-shadow: inset 0 0 0 1px rgba(115,171,59,0.04); }
.category-card.is-active::after { background: linear-gradient(135deg, rgba(0,0,0,0.35), rgba(115,171,59,0.28)); }
.category-card.is-active img { transform: scale(1.03); filter: saturate(1.05) brightness(0.72) contrast(1.03); }
.category-card.is-active .title { color: #fff; transform: translateY(-2px); }
.category-card[aria-selected="true"] { cursor: default; }
.back-to-top { position: sticky; bottom: 20px; margin-top: 12px; text-align: right; }
.back-to-top a { display: inline-block; padding: 8px 12px; border-radius: 8px; color: var(--color-primary); text-decoration: none; background: rgba(115,171,59,0.08); border: 1px solid rgba(115,171,59,0.16); }
/* Minimal CTA band used between subsections for breathing room */
.services-page .sv-cta { margin: 22px 0 8px; padding: 18px 0; }
.services-page .sv-cta .btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* Chevron-only back-to-top, green accent */
.services-page .btn-top { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; line-height: 0; border-radius: 999px; color: var(--color-primary); background: rgba(115,171,59,0.06); border: 1px solid rgba(115,171,59,0.22); text-decoration: none; transition: background .2s ease, transform .2s ease, border-color .2s ease; }
.services-page .btn-top:hover { background: rgba(115,171,59,0.12); border-color: rgba(115,171,59,0.34); transform: translateY(-2px); }
.services-page .btn-top:focus-visible { outline: 2px solid rgba(115,171,59,0.7); outline-offset: 2px; }
.services-page .btn-top svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Anchor targets for deep links with header offset */
.anchor-target { display: block; height: 0; width: 0; overflow: hidden; scroll-margin-top: var(--header-offset); }
/* Single-section view: hide non-active sections only when JS is enabled (progressive enhancement) */
.services-page.js-on .service-area { display: none; }
.services-page.js-on .service-area.is-active { display: block; }
@media (max-width: 820px) {
.items { grid-template-columns: 1fr; }
.category-cards { grid-template-columns: 1fr; }
}
/* --- Validation Matters (Homepage) --- */
/* Scoped styles for Validation Matters preview adopting Services card format */
.validation-home { padding: var(--space-section-top) 5% var(--space-section-bottom); background: #000; color: #fff; }
.validation-home .container { max-width: 1100px; margin: 0 auto; }
.validation-home header.section-header { text-align: center; margin: 0 auto 28px; max-width: 920px; }
.validation-home header.section-header h2 { font-size: var(--type-h2); color: #fff; margin: 0 0 6px; }
.validation-home header.section-header h2 .accent { color: var(--color-primary); }
.validation-home header.section-header .lead { color: var(--text-secondary); font-size: var(--type-body); line-height: 1.6; opacity: 0.95; }
/* Grid to mirror Services layout */
.validation-home .grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; margin-top: 14px; align-items: start; }
/* Card adopts Services card look and feel */
.validation-home .card { display: flex; flex-direction: column; background: #040703; border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 24px; box-shadow: 0 8px 30px rgba(0,0,0,0.6); transition: transform 240ms cubic-bezier(.2,.9,.2,1), box-shadow 240ms, border-color 240ms; will-change: transform; height: 100%; position: relative; color: inherit; text-decoration: none; }
.validation-home .card:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(115,171,59,0.18); border-radius: 12px; }
.validation-home .card:hover, .validation-home .card:focus-within, .validation-home .card:focus { transform: translateY(-8px) scale(1.02); box-shadow: 0 18px 40px rgba(0,0,0,0.65); }
/* Image on top, with gradient overlay like Services */
/* Force visual to 1277x680 aspect ratio (matches site media) */
.validation-home .card-visual { aspect-ratio: 1277 / 680; width: 100%; border-radius: 8px; overflow: hidden; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; background: #111; position: relative; }
.validation-home .card-visual::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 50%, rgba(115,171,59,0.18) 100%); transition: background 180ms ease, opacity 180ms ease; z-index: 1; }
.validation-home .card-visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms cubic-bezier(.2,.9,.2,1); z-index: 0; }
.validation-home .card:hover .card-visual img, .validation-home .card:focus-within .card-visual img { transform: scale(1.06); }
/* Headings with subtle arrow cue */
.validation-home .card h3 { margin: 6px 0 12px; font-size: var(--type-h4); color: var(--color-primary); display: inline-flex; align-items: center; gap: 8px; }
.validation-home .card h3::after { content: "\2192"; font-size: 0.9em; line-height: 1; color: var(--color-primary); opacity: 1; transform: translateX(0); transition: transform 180ms cubic-bezier(.2,.9,.2,1), opacity 180ms; }
.validation-home .card:hover h3::after, .validation-home .card:focus-within h3::after { transform: translateX(3px); opacity: 1; }
.validation-home .card:hover h3, .validation-home .card:focus h3, .validation-home .card:focus-within h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(115,171,59,0.6); }
/* Body text */
.validation-home .card p { color: #b0b0b0; margin: 0; flex: 1 1 auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; }
/* Keyword emphasis utility - use global highlight token */
/* Micro-CTA chip like Services */
.validation-home .card::after { content: "View insight \2192"; position: absolute; right: 12px; bottom: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); color: var(--color-primary); font-size: 12px; letter-spacing: .02em; line-height: 1; opacity: 0; transform: translateY(4px); transition: opacity 180ms ease, transform 180ms cubic-bezier(.2,.9,.2,1), background 180ms ease, border-color 180ms ease; pointer-events: none; backdrop-filter: saturate(110%) blur(2px); }
.validation-home .card:hover::after, .validation-home .card:focus::after, .validation-home .card:focus-within::after { opacity: 1; transform: translateY(0); background: rgba(115,171,59,0.12); border-color: rgba(115,171,59,0.18); }
/* Scroll-in animation parity with Services */
.validation-home .card.fade-in-element { opacity: 0; transform: translateY(10px); transition-property: opacity, transform; transition-duration: 380ms; transition-timing-function: cubic-bezier(.2,.9,.2,1); will-change: opacity, transform; }
.validation-home .card.fade-in-element.animated { opacity: 1; transform: translateY(0); }
@media (max-width: 980px) { .validation-home .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
.validation-home { padding: var(--space-section-top) 4% var(--space-section-bottom); }
.validation-home .grid { grid-template-columns: 1fr; }
/* On single column, show full body text for readability */
.validation-home .card p { -webkit-line-clamp: unset; line-clamp: unset; }
}
/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
.validation-home .card-visual { height: auto; }
.validation-home .card-visual::before { content: ""; display: block; padding-top: calc(680 / 1277 * 100%); }
.validation-home .card-visual img { position: absolute; inset: 0; }
}
/* --- Validation Matters Tabs (Full Page) --- */
/* Scoped styles to match site design tokens and card visual language */
:root { --header-offset: 96px; }
.vm-tabs { background: #000; color: var(--color-text, #d7d7db); padding: var(--space-section-top) 5% var(--space-section-bottom); }
.vm-tabs .container { max-width: 1100px; margin: 0 auto; display: block; }
/* Section header to match site pattern */
.vm-tabs .section-header { text-align: center; margin: 0 auto 22px; max-width: 900px; }
.vm-tabs .section-header h2 { color: #fff; margin: 0 0 8px; font-size: var(--type-h2); line-height: 1.12; }
.vm-tabs .section-header h2 .accent { color: var(--color-primary); }
.vm-tabs .section-header .intro { color: var(--text-secondary); margin: 0; line-height: 1.7; font-size: var(--type-body); }
/* Tabs header */
.vm-tabs .tablist-wrap { display: grid; justify-items: center; margin: 12px 0 10px; }
.vm-tabs .tablist { display: inline-grid; grid-auto-flow: column; gap: 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: #0d0f10; }
.vm-tabs .tab { appearance: none; background: transparent; border: 0; padding: 12px 18px; color: #a5a7ab; font: inherit; font-weight: var(--fw-medium, 500); text-transform: none; letter-spacing: .2px; cursor: pointer; border-right: 1px solid rgba(255,255,255,.08); transition: background .2s ease, color .2s ease; }
.vm-tabs .tab:last-child { border-right: 0; }
.vm-tabs .tab[aria-selected="true"] { background: #040703; color: #fff; }
.vm-tabs .tab:not([aria-selected="true"]):hover { background: rgba(255,255,255,.06); color: #d7d7db; }
/* Panels layout and cards */
.vm-tabs .main { min-height: 0; }
.vm-tabs .panel { display: none; scroll-margin-top: var(--header-offset); }
.vm-tabs .panel[aria-hidden="false"] { display: block; }
.vm-tabs .hash-anchor { display: block; height: 0; margin: 0; padding: 0; scroll-margin-top: var(--header-offset); }
.vm-tabs .cards { display: grid; gap: 14px; max-width: 820px; }
.vm-tabs .card { background: #040703; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; overflow: hidden; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.vm-tabs .card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.14); box-shadow: 0 10px 28px rgba(0,0,0,.6); }
.vm-tabs .card-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.06); background: #0d0f10; }
.vm-tabs .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary, #73AB3B); flex: none; }
.vm-tabs .card-title { margin: 0; color: #fff; font-size: var(--type-body); letter-spacing: .2px; }
.vm-tabs .card-content { padding: 16px; color: #b0b0b0; }
.vm-tabs .card-content p { margin: 0 0 12px; line-height: 1.7; }
.vm-tabs .card-content p:last-child { margin-bottom: 0; }
/* Use global highlight token */
.vm-tabs .hl-accent { color: var(--color-text, #ffffff); font-weight: inherit; font-size: inherit; }
/* Text links for intro */
.vm-tabs .text-link { color: var(--color-primary); text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(115,171,59,0.5); }
.vm-tabs .text-link:hover { text-decoration-color: var(--color-primary); }
/* Inline visuals (small, right-aligned, flow with text) */
/* Use the requested tall aspect ratio (width:height = 760:1460) while remaining responsive.
The container maintains the ratio and the inner img covers it. */
.vm-tabs .inline-visual { float: right; max-width: 320px; width: 40%; min-width: 220px; aspect-ratio: 760 / 1460; margin: 6px 0 12px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: #0f1112; overflow: hidden; }
.vm-tabs .inline-visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.05) brightness(.9); display: block; }
@media (max-width: 980px) { .vm-tabs .inline-visual { float: none; width: 100%; min-width: 0; max-width: 100%; /* keep the aspect ratio on narrow screens where supported */ aspect-ratio: 760 / 1460; height: auto; margin: 8px 0 12px 0; } }
@media (max-width: 640px) {
.vm-tabs { padding: var(--space-section-top) 4% var(--space-section-bottom); }
.vm-tabs .tab { padding: 10px 12px; }
}
/* CTA styles */
.vm-tabs .cta-row { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; }
.vm-tabs .cta-button { display: inline-block; background: var(--color-primary, #73AB3B); color: #041007; padding: 10px 14px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: transform .12s ease, opacity .12s ease; }
.vm-tabs .cta-button:hover { transform: translateY(-2px); opacity: .95; }
/* ========================================================================
PAGE-SPECIFIC STYLES
Styles for individual pages
======================================================================== */
/* --- About Page --- */
/* About page: enforce pure black page background */
body.about-page { background: #000000; }
body.about-page .footer, body.about-page footer { background: #000000; }
/* --- Single Topic Pages (Need for Validation, Development Ceiling, Development Direction) --- */
:root { --header-offset: 110px; }
/* Match validation-matters muted body text and lead treatment */
.single-topic { background:#000; padding: var(--space-section-top) 6% var(--space-section-bottom); color: #b0b0b0; }
.single-topic .container { max-width: 1100px; margin: 0 auto; }
.single-topic header.section-hero { text-align:center; margin: 0 auto 22px; max-width: 900px; }
/* Make hero section titles pure white by default; spans with .gradient-text keep their own styling */
.single-topic header.section-hero h2 { font-size: var(--type-h2); margin: 0 0 10px; color: #ffffff; }
.single-topic header.section-hero .lead { color: #d7d7db; }
.hero-visual { position: relative; border-radius: 12px; overflow: hidden; background:#0f1112; border:1px solid rgba(255,255,255,0.06); aspect-ratio: 1885 / 580; min-height: 240px; margin: 14px 0 22px; }
.hero-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(0.95) brightness(0.9) contrast(1.05); transform:scale(1.02); }
/* Mobile: use tall aspect ratio and let the source serve the mobile image */
@media (max-width: 640px) {
.hero-visual { aspect-ratio: 760 / 1460; min-height: auto; }
}
.content-card { background:#040703; border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding: 18px 20px; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.content-card h2, .content-card h3 { color: var(--color-primary); margin: 4px 0 10px; font-size: var(--type-h3); }
.content-card p { color: inherit; }
/* Add comfortable spacing between paragraphs inside the content card */
.content-card p + p { margin-top: 1rem; }
/* Remove cursive emphasis and make emphasized/bold text pure white like validation-matters */
.single-topic em { color: #ffffff; font-style: normal; }
.single-topic strong { color: #ffffff; font-weight: 700; }
/* --- reCAPTCHA Error Page --- */
.error-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 0 5%;
background: radial-gradient(circle at 20% 50%, rgba(0, 102, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.05) 0%, transparent 50%);
}
.error-content {
text-align: center;
max-width: 600px;
}
.error-code {
font-size: var(--type-display);
font-weight: var(--fw-extrabold);
background: linear-gradient(45deg, var(--color-danger-dark), var(--color-danger));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20px;
line-height: 1;
}
.error-message {
font-size: var(--type-h1);
margin-bottom: 20px;
color: var(--color-danger);
}
.error-description {
font-size: var(--type-lead);
color: var(--text-secondary);
margin-bottom: 40px;
}
.auto-redirect {
font-size: var(--type-small);
color: var(--text-secondary);
margin-top: 30px;
}
@media (max-width: 600px) {
.error-code {
font-size: calc(var(--type-display) * 0.33);
}
.error-message {
font-size: var(--type-lead);
}
.error-description {
font-size: var(--type-small);
}
.error-content {
padding: 20px 0;
}
.error-page {
padding: 0 2%;
}
.hero-cta {
flex-direction: column;
gap: 10px;
align-items: center;
}
}