/* --- css/tokens.css --- */
/* ==========================================================================
 OHRA HYDRO POLYMERS - DESIGN TOKENS
 ========================================================================== */
:root {
 /* ----------------------------------------------------------------------
 COLORS: DAYLIGHT ENGINEERING (LIGHT MODE)
 Using OKLCH. Base Hue: 145 (Green/Botanical)
 ---------------------------------------------------------------------- */
 /* Backgrounds (Daylight Mode) */
 --bg: #E3E7E2; /* Stone — main page background */
 --bg-alt: #C7CDC8; /* Clay — alternating sections */
 --bg-impact: #2D3436; /* Charcoal — hero, dark areas */
 --bg-brand: #4A5E46; /* Forest Green — branded sections */
 /* Text (on light backgrounds) */
 --text-primary: #2D3436; /* Charcoal — headings, body text */
 --text-secondary: #4A5E46; /* Forest Green — subheadings */
 --text-muted: #5A6D5A; /* Deep Sage — captions, labels */
 /* Text (on dark/impact backgrounds) */
 --text-on-dark: #E3E7E2; /* Stone — text on Charcoal backgrounds */
 --text-on-brand: #E3E7E2; /* Stone — text on Forest Green backgrounds */
 /* Base Colors & Accents */
 --color-primary: #2D3436; /* Charcoal */
 --color-primary-dark: #212627; /* Darker Charcoal */
 --color-secondary: #4A5E46; /* Forest Green */
 --color-secondary-light:#7A8E7A; /* Sage */
 --accent: #4A5E46; /* Forest Green as primary CTA accent */
 --accent-hover: #364533; /* Darker Forest Green */
 /* Legacy fallbacks used in some components */
 --color-white: #E3E7E2;
 --color-black: #2D3436;
 --color-bg-light: var(--bg);
 --color-bg-dark: var(--bg-impact);
 --border-subtle: #C7CDC8;
 --color-ink: var(--text-primary);
 --color-ink-muted: var(--text-muted);
 --color-background: var(--bg);
 --color-accent: var(--accent);
 /* ----------------------------------------------------------------------
 TYPOGRAPHY
 Display: Barlow Condensed | Body: Source Sans 3
 ---------------------------------------------------------------------- */
 --font-display: 'Barlow Condensed', sans-serif;
 --font-body: 'Source Sans 3', sans-serif;
 /* Fluid Type Scale (clamp) */
 --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); /* 12-14px */
 --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); /* 14-16px */
 --text-base: clamp(1rem, 0.9rem + 0.45vw, 1.125rem); /* 16-18px */
 --text-lg: clamp(1.125rem, 1rem + 0.55vw, 1.375rem); /* 18-22px */
 --text-xl: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); /* 22-32px */
 --text-2xl: clamp(1.75rem, 1.3rem + 2vw, 3rem); /* 28-48px */
 --text-3xl: clamp(2.25rem, 1.5rem + 3.5vw, 4.5rem); /* 36-72px */
 --text-hero: clamp(2.75rem, 1.8rem + 4.5vw, 5.5rem); /* 44-88px */
 /* ----------------------------------------------------------------------
 SPACING
 Fluid spacing scale
 ---------------------------------------------------------------------- */
 --space-xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem); /* 4-8px */
 --space-sm: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem); /* 8-12px */
 --space-md: clamp(1rem, 0.8rem + 0.8vw, 1.5rem); /* 16-24px */
 --space-lg: clamp(1.5rem, 1rem + 2vw, 3rem); /* 24-48px */
 --space-xl: clamp(2.5rem, 1.5rem + 4vw, 5rem); /* 40-80px */
 --space-2xl: clamp(4rem, 2.5rem + 6vw, 8rem); /* 64-128px */
 --space-3xl: clamp(6rem, 4rem + 8vw, 12rem); /* 96-192px */
 /* ----------------------------------------------------------------------
 LAYOUT & ELEVATION
 ---------------------------------------------------------------------- */
 --container-width: 1600px;
 --border-radius: 4px; /* Slight rounding, keeps it industrial */
 /* Subtle shadows using brand colors */
 --shadow-sm: 0 2px 4px rgba(45, 52, 54, 0.05);
 --shadow-md: 0 4px 12px rgba(45, 52, 54, 0.08);
 --shadow-lg: 0 12px 24px rgba(45, 52, 54, 0.12);
}
/* --- css/base.css --- */
/* ==========================================================================
 OHRA HYDRO POLYMERS - BASE STYLES
 ========================================================================== */
/* ----------------------------------------------------------------------
 RESET
 ---------------------------------------------------------------------- */
*, *::before, *::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}
html {
 scroll-behavior: auto; /* Handled by Lenis for smooth scrolling */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
body {
 background-color: var(--bg);
 color: var(--text-primary);
 font-family: var(--font-body);
 font-size: var(--text-base);
 line-height: 1.6;
 overflow-x: hidden;
 width: 100%;
}
/* ----------------------------------------------------------------------
 TYPOGRAPHY
 ---------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
 font-family: var(--font-display);
 font-weight: 700;
 text-transform: uppercase;
 line-height: 1.1;
 margin-bottom: var(--space-md);
 letter-spacing: 0.02em;
 color: var(--text-primary);
}
h1 {
 font-size: var(--text-hero);
}
h2 {
 font-size: var(--text-3xl);
}
h3 {
 font-size: var(--text-2xl);
}
h4 {
 font-size: var(--text-xl);
}
p {
 margin-bottom: var(--space-md);
 max-width: 70ch; /* Optimal reading length */
}
a {
 color: var(--accent);
 text-decoration: none;
 transition: color 0.3s ease;
}
a:hover {
 color: var(--accent-hover);
}
strong, b {
 font-weight: 700;
 color: var(--text-primary);
}
/* Typography Utility Classes */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.font-display { font-family: var(--font-display); text-transform: uppercase; }
/* Inverted text for impact sections */
.theme-dark {
 background-color: var(--bg-impact);
 color: var(--text-on-dark);
}
.theme-dark h1, 
.theme-dark h2, 
.theme-dark h3, 
.theme-dark h4, 
.theme-dark h5, 
.theme-dark h6,
.theme-dark strong,
.bg-dark strong,
.hero-premium strong,
.hero-text-layer strong,
.hero-text-block strong {
 color: #ffffff !important;
}
.theme-brand {
 background-color: var(--bg-brand);
 color: var(--text-on-brand);
}
.theme-brand h1, 
.theme-brand h2, 
.theme-brand h3, 
.theme-brand h4, 
.theme-brand h5, 
.theme-brand h6,
.theme-brand strong {
 color: var(--text-on-brand);
}
/* ----------------------------------------------------------------------
 LAYOUT UTILITIES
 ---------------------------------------------------------------------- */
.container {
 width: 100%;
 max-width: var(--container-width);
 margin: 0 auto;
 padding: 0 var(--space-md);
}
.section {
 padding: var(--space-3xl) 0;
}
.section-sm {
 padding: var(--space-xl) 0;
}
.section-full {
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 justify-content: center;
}
.grid {
 display: grid;
 gap: var(--space-lg);
}
.grid-2 {
 grid-template-columns: repeat(1, 1fr);
}
.grid-3 {
 grid-template-columns: repeat(1, 1fr);
}
.grid-4 {
 grid-template-columns: repeat(1, 1fr);
}
/* Tablet & Up */
@media (min-width: 768px) {
 .grid-2 { grid-template-columns: repeat(2, 1fr); }
 .grid-3 { grid-template-columns: repeat(2, 1fr); }
 .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
/* Desktop & Up */
@media (min-width: 1024px) {
 .grid-3 { grid-template-columns: repeat(3, 1fr); }
 .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
/* Flex Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
/* ----------------------------------------------------------------------
 MOBILE FRIENDLINESS, INP & DOM RENDERING OPTIMIZATIONS
 ---------------------------------------------------------------------- */
button, input, select, textarea, a, .btn, .nav-link, .footer-link, .modal-close {
 touch-action: manipulation;
 -webkit-tap-highlight-color: transparent;
}
button, .btn, .nav-link, .mobile-menu-btn, input[type="submit"] {
 min-height: 44px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
}
input, select, textarea {
 font-size: 16px !important; /* Prevents mobile iOS auto-zoom */
}
/* Off-screen DOM rendering optimization to minimize INP & DOM size layout calculation latency */
.section, .card, .table-responsive, .pseo-landing section:not(.hero-premium) {
 content-visibility: auto;
 contain-intrinsic-size: 1px 500px;
}
/* Remove Native Browser UI Slop */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
 -webkit-appearance: none;
 margin: 0;
}
input[type="number"] {
 -moz-appearance: textfield; /* Firefox */
}
input:focus, select:focus, textarea:focus, button:focus, .custom-select-trigger:focus {
 outline: none;
}
/* --- css/components.css --- */
/* ==========================================================================
 OHRA HYDRO POLYMERS - COMPONENTS
 ========================================================================== */
/* ----------------------------------------------------------------------
 BUTTONS & LINKS
 ---------------------------------------------------------------------- */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: var(--space-sm) var(--space-lg);
 font-family: var(--font-display);
 font-size: var(--text-lg);
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 border-radius: var(--border-radius);
 transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s cubic-bezier(0.25, 1, 0.5, 1);
 cursor: pointer;
 text-decoration: none;
 border: 2px solid transparent;
}
.btn:active {
 transform: scale(0.97) translateY(0);
 transition-duration: 0.1s;
}
.btn-primary {
 background-color: var(--accent);
 color: var(--text-on-brand);
}
.btn-primary:hover {
 background-color: var(--accent-hover);
 color: var(--text-on-brand);
 transform: translateY(-2px) scale(1.02);
 box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.btn-outline {
 background-color: transparent;
 color: var(--text-primary);
 border-color: var(--text-primary);
}
.btn-outline:hover {
 background-color: var(--text-primary);
 color: var(--text-on-dark);
 transform: translateY(-2px) scale(1.02);
}
.theme-dark .btn-outline {
 color: var(--text-on-dark);
 border-color: var(--text-on-dark);
}
.theme-dark .btn-outline:hover {
 background-color: var(--text-on-dark);
 color: var(--text-primary);
 transform: translateY(-2px) scale(1.02);
}
.btn:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: 2px;
}
.btn-sm {
 padding: 0.25rem 1rem;
 font-size: 1rem;
}
/* ----------------------------------------------------------------------
 HEADER / NAVIGATION
 ---------------------------------------------------------------------- */
.site-header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 100;
 padding: var(--space-md) 0;
 transition: all 0.4s ease;
 background-color: transparent; /* Transparent initially over the hero */
}
/* When user scrolls past hero, JS adds this class */
.site-header.is-scrolled,
.site-header.force-scrolled {
 background-color: rgba(20, 24, 20, 0.85); /* Dark forest transparent */
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 padding: var(--space-sm) 0;
}
.site-header .container {
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.logo h2 {
 margin: 0;
 font-size: 1.5rem;
 color: var(--text-on-dark);
 letter-spacing: 0.1em;
 font-family: var(--font-display);
}
.main-nav {
 display: none; /* Hidden on mobile by default */
}
.main-nav.is-open {
 display: flex;
 flex-direction: column;
 position: absolute;
 top: 100%;
 left: 0;
 width: 100%;
 background-color: var(--bg-impact);
 padding: var(--space-md);
 gap: var(--space-md);
 border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.mobile-menu-btn {
 display: block;
 background: transparent;
 border: none;
 color: var(--text-on-dark);
 cursor: pointer;
 padding: 0.5rem;
}
@media (min-width: 768px) {
 .main-nav {
 display: flex;
 flex-direction: row;
 position: static;
 width: auto;
 background-color: transparent;
 padding: 0;
 gap: var(--space-lg);
 align-items: center;
 border: none;
 }
 .mobile-menu-btn {
 display: none;
 }
}
.nav-link {
 font-family: var(--font-display);
 font-size: var(--text-base);
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 color: var(--text-on-dark);
 text-decoration: none;
 position: relative;
 padding: 4px 0;
}
.nav-link:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: 4px;
 border-radius: 2px;
}
/* ----------------------------------------------------------------------
 SCROLL HERO (APPLE STYLE)
 ---------------------------------------------------------------------- */
.hero-scroll-container {
 position: relative;
 height: 400vh; /* Tighter scroll duration for a punchier experience */
 width: 100%;
 background-color: var(--color-primary-dark); /* Behind the canvas */
}
.hero-sticky-wrap {
 position: sticky;
 top: 0;
 width: 100%;
 height: 100vh;
 height: 100svh;
 overflow: hidden;
}
.hero-canvas {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 will-change: transform;
 z-index: 1;
}
/* The gradient overlay ensures text is readable and edges blend into next section */
.hero-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(
 to bottom,
 rgba(0,0,0,0.4) 0%,
 rgba(0,0,0,0.1) 40%,
 rgba(0,0,0,0.1) 60%,
 rgba(0,0,0,0.7) 100%
 );
 z-index: 2;
 pointer-events: none;
}
.hero-text-layer {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 3;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
 padding: var(--space-xl);
 pointer-events: none; /* Let clicks pass through if needed */
}
/* Individual text blocks that will fade in and out via GSAP */
.hero-text-block {
 position: absolute;
 opacity: 0;
 transform: translateY(20px);
 width: 100%;
 max-width: 800px;
 padding: 0 var(--space-md);
 pointer-events: auto; /* Allow picking and interaction */
}
.hero-text-block h1,
.hero-text-block h2,
.hero-text-block h3 {
 color: #ffffff !important;
 margin-bottom: var(--space-sm);
 text-shadow: 0 4px 20px rgba(0,0,0,0.85), 0 2px 6px rgba(0,0,0,0.9);
}
.hero-text-block p {
 color: rgba(227, 231, 226, 0.9); /* Stone slightly transparent */
 font-size: var(--text-lg);
 text-shadow: 0 2px 4px rgba(0,0,0,0.5);
 margin: 0 auto;
}
.hero-cta {
 margin-top: var(--space-lg);
 display: flex;
 gap: var(--space-md);
 justify-content: center;
 pointer-events: auto; /* Re-enable clicks for buttons */
}
/* ----------------------------------------------------------------------
 CARDS
 ---------------------------------------------------------------------- */
.card {
 background-color: var(--bg);
 border-radius: var(--border-radius);
 padding: var(--space-xl);
 display: flex;
 flex-direction: column;
 height: 100%;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 border: 1px solid var(--border-subtle);
}
.card:hover {
 transform: translateY(-5px);
 box-shadow: var(--shadow-md);
}
.card-icon {
 font-size: 2rem;
 margin-bottom: var(--space-md);
 color: var(--accent);
}
.card-title {
 margin-bottom: var(--space-sm);
}
.card-content {
 flex-grow: 1;
 color: var(--text-secondary);
}
/* ----------------------------------------------------------------------
 FOOTER
 ---------------------------------------------------------------------- */
.site-footer {
 background-color: var(--bg-impact);
 color: var(--text-muted);
 padding: var(--space-3xl) 0 max(var(--space-lg), env(safe-area-inset-bottom));
}
/* IMPECCABLE ADAPT: TOUCH & MOBILE OPTIMIZATIONS */
body {
 padding-top: env(safe-area-inset-top);
 padding-left: env(safe-area-inset-left);
 padding-right: env(safe-area-inset-right);
}
@media (pointer: coarse) {
 .btn { padding: calc(var(--space-sm) + 4px) calc(var(--space-lg) + 8px); }
 .nav-link { padding: 8px 0; }
 .btn:active, .card:active { transform: scale(0.98); transition-duration: 0.1s; }
}
.footer-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-2xl);
 margin-bottom: var(--space-2xl);
}
@media (min-width: 768px) {
 .footer-grid {
 grid-template-columns: 2fr 1fr 1fr;
 }
}
.footer-logo img {
 height: 30px;
 margin-bottom: var(--space-md);
 opacity: 0.8;
}
.footer-heading {
 color: var(--text-on-dark);
 font-family: var(--font-display);
 font-size: var(--text-lg);
 margin-bottom: var(--space-md);
}
.footer-links {
 list-style: none;
}
.footer-links li {
 margin-bottom: var(--space-sm);
}
.footer-links a {
 color: var(--text-muted);
}
.footer-links a:hover {
 color: var(--text-on-dark);
}
.footer-bottom {
 border-top: 1px solid rgba(255,255,255,0.1);
 padding-top: var(--space-lg);
 display: flex;
 flex-direction: column;
 gap: var(--space-md);
 align-items: center;
 font-size: var(--text-sm);
}
@media (min-width: 768px) {
 .footer-bottom {
 flex-direction: row;
 justify-content: space-between;
 }
}
/* ----------------------------------------------------------------------
 TYPOGRAPHY & UTILITIES
 ---------------------------------------------------------------------- */
.section-header {
 margin-bottom: var(--space-3xl);
 max-width: 800px;
 margin-left: auto;
 margin-right: auto;
}
.eyebrow {
 display: inline-block;
 font-family: var(--font-display);
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: var(--accent);
 margin-bottom: var(--space-sm);
 font-size: 0.875rem;
}
.lead {
 font-size: 1.25rem;
 color: var(--text-secondary);
 line-height: 1.5;
}
.theme-light {
 background-color: var(--bg);
 color: var(--text-primary);
}
/* ----------------------------------------------------------------------
 PARALLAX SECTION
 ---------------------------------------------------------------------- */
.parallax-section {
 position: relative;
 min-height: 90vh;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 clip-path: inset(0); /* Crucial for background-attachment fixed on iOS */
}
.parallax-bg {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-size: cover;
 background-position: center;
 background-attachment: fixed;
 z-index: 0;
 filter: brightness(0.3) contrast(1.2);
}
.parallax-content {
 position: relative;
 z-index: 1;
 color: var(--text-on-dark);
 padding: var(--space-3xl) 0;
}
.parallax-content h2 {
 font-size: 5rem;
 margin-bottom: var(--space-md);
 letter-spacing: 0.02em;
}
/* GSAP Animations */
.fade-in-up {
 opacity: 0;
 transform: translateY(30px);
}
/* GSAP Performance Optimizations */
.gsap-reveal, 
.hero-premium h1, 
.hero-premium .tagline, 
.hero-text-block {
 will-change: transform, opacity, filter;
}
/* ----------------------------------------------------------------------
 INDUSTRIAL WIREFRAME / EDITORIAL
 ---------------------------------------------------------------------- */
.editorial-section {
 position: relative;
 padding: clamp(6rem, 15vw, 10rem) 0;
}
.heading-display {
 font-family: var(--font-display);
 font-size: clamp(4rem, 8vw, 7rem);
 letter-spacing: -0.03em;
 line-height: 0.9;
 margin-bottom: 2rem;
 text-transform: uppercase;
 color: var(--text-primary);
}
.heading-display .highlight {
 color: var(--color-secondary);
}
.text-lead {
 font-size: 1.5rem;
 color: var(--text-secondary);
 margin-bottom: 4rem;
 line-height: 1.6;
}
.spec-grid {
 display: block;
 border: none;
 margin-top: var(--space-2xl);
}
.spec-cell {
 position: relative;
 border: none;
 padding: var(--space-lg) 0;
 max-width: 100%;
 margin: 0;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: var(--space-xl);
}
.spec-cell-text {
 max-width: 100%;
}
.spec-cell-img {
 width: 100%;
 height: 300px;
 background-size: cover;
 background-position: center;
 border-radius: var(--border-radius);
 opacity: 0.85;
 mix-blend-mode: multiply;
 mask-image: linear-gradient(to bottom, transparent, black 30%, black 100%);
 -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 100%);
 pointer-events: none;
}
@media (min-width: 768px) {
 .spec-cell { 
 flex-direction: row;
 align-items: center;
 padding: var(--space-xl) 0; 
 }
 .spec-cell:nth-child(even) {
 flex-direction: row-reverse;
 }
 .spec-cell-text {
 flex: 0 0 55%;
 }
 .spec-cell-img {
 flex: 0 0 35%;
 height: 400px;
 }
 .spec-cell:nth-child(even) .spec-cell-text {
 text-align: right;
 }
 .spec-cell:nth-child(odd) .spec-cell-img {
 mask-image: linear-gradient(to left, black 60%, transparent);
 -webkit-mask-image: linear-gradient(to left, black 60%, transparent);
 }
 .spec-cell:nth-child(even) .spec-cell-img {
 mask-image: linear-gradient(to right, black 60%, transparent);
 -webkit-mask-image: linear-gradient(to right, black 60%, transparent);
 }
}
/* Immersive Full-Bleed Grid */
.spec-grid-immersive {
 width: 100vw;
 margin-left: calc(50% - 50vw);
 margin-right: calc(50% - 50vw);
 padding: 0;
}
.spec-cell-immersive {
 display: flex;
 flex-direction: column;
 padding: 0;
 margin: var(--space-2xl) 0;
 align-items: stretch;
 max-width: 100vw;
}
.spec-cell-text-immersive {
 padding: var(--space-xl) var(--space-md);
}
.spec-cell-img-immersive {
 height: 50vh;
 min-height: 400px;
 opacity: 0.95;
 mix-blend-mode: multiply;
 border-radius: 0;
 pointer-events: none;
 background-size: cover;
 background-position: center;
}
@media (min-width: 768px) {
 .spec-cell-immersive {
 flex-direction: row;
 margin: 0;
 min-height: 70vh;
 }
 .spec-cell-immersive:nth-child(even) {
 flex-direction: row-reverse;
 }
 .spec-cell-text-immersive {
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
 padding: var(--space-2xl) calc(50vw - 600px + 2rem);
 }
 .spec-cell-img-immersive {
 flex: 1;
 height: auto;
 mask-image: linear-gradient(to left, black 70%, transparent);
 -webkit-mask-image: linear-gradient(to left, black 70%, transparent);
 }
 .spec-cell-immersive:nth-child(even) .spec-cell-img-immersive {
 mask-image: linear-gradient(to right, black 70%, transparent);
 -webkit-mask-image: linear-gradient(to right, black 70%, transparent);
 }
}
.spec-title {
 font-family: var(--font-display);
 font-size: clamp(2rem, 4vw, 3rem);
 letter-spacing: -0.02em;
 line-height: 1.1;
 margin-bottom: var(--space-md);
 color: var(--text-primary);
}
.spec-data {
 font-family: var(--font-display);
 font-size: clamp(4rem, 8vw, 7rem);
 line-height: 0.9;
 letter-spacing: -0.04em;
 color: var(--text-primary);
}
.spec-label {
 font-size: 1.125rem;
 text-transform: uppercase;
 font-weight: 700;
 color: var(--text-secondary);
 letter-spacing: 0.05em;
 margin-top: var(--space-sm);
 margin-bottom: var(--space-md);
}
.spec-body {
 font-size: 1.125rem;
 line-height: 1.6;
 color: var(--text-primary);
}
/* ----------------------------------------------------------------------
 SECTION 1: THE BIO-MATRIX (EARTH-TONE PREMIUM)
 ---------------------------------------------------------------------- */
.bio-matrix-section {
 background-color: var(--bg-impact);
 color: var(--text-on-dark);
 padding: clamp(6rem, 15vw, 12rem) 0;
 position: relative;
 overflow: hidden;
}
/* Subtle background gradient for depth */
.bio-matrix-section::before {
 content: '';
 position: absolute;
 top: -50%;
 right: -20%;
 width: 100%;
 height: 200%;
 background: radial-gradient(circle, rgba(74, 94, 70, 0.15) 0%, transparent 60%);
 z-index: 0;
 pointer-events: none;
}
.bio-matrix-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-xl);
 align-items: center;
 position: relative;
 z-index: 1;
}
@media (min-width: 768px) {
 .bio-matrix-grid {
 grid-template-columns: 1fr 1fr;
 gap: var(--space-3xl);
 }
}
.bio-matrix-content {
 width: 100%;
}
.bio-matrix-content h2 {
 font-family: var(--font-display);
 font-size: clamp(3.5rem, 8vw, 6rem);
 text-transform: uppercase;
 letter-spacing: -0.02em;
 line-height: 0.9;
 margin-bottom: var(--space-xl);
 color: var(--text-on-dark);
}
.bio-matrix-content h2 span {
 color: var(--bg-alt);
 opacity: 0.8;
}
.bio-matrix-content p {
 font-family: var(--font-body);
 font-size: clamp(1.25rem, 3vw, 1.5rem);
 font-weight: 400;
 line-height: 1.6;
 margin-bottom: var(--space-2xl);
 max-width: 45ch;
 color: rgba(227, 231, 226, 0.85);
}
/* Brutalist/Industrial Stat Cards (Replaced Glassmorphism) */
.bio-matrix-stats {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-md);
 margin-top: var(--space-xl);
}
.stat-glass-card {
 flex: 1 1 200px;
 background: transparent;
 border: 2px solid rgba(227, 231, 226, 0.2);
 border-radius: 0; /* Harder industrial edges */
 padding: var(--space-lg);
 display: flex;
 flex-direction: column;
 transition: transform 0.3s ease, border-color 0.3s ease;
}
.stat-glass-card:hover {
 transform: translateY(-5px);
 border-color: var(--accent);
}
.stat-value {
 font-family: var(--font-display);
 font-size: 3rem;
 font-weight: 700;
 color: var(--text-on-dark);
 line-height: 1;
 margin-bottom: 0.5rem;
}
.stat-label {
 font-size: 0.875rem;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: var(--bg-alt);
 font-weight: 700;
}
.bio-matrix-visual {
 width: 100%;
 position: relative;
 border-radius: var(--border-radius);
 overflow: hidden;
 box-shadow: var(--shadow-lg);
}
.bio-matrix-visual img {
 width: 100%;
 height: auto;
 display: block;
 border-radius: var(--border-radius);
 transition: transform 0.7s ease;
}
.bio-matrix-visual:hover img {
 transform: scale(1.05);
}
/* Subtle overlay on image to match the dark tone */
.bio-matrix-visual::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(135deg, rgba(45, 52, 54, 0.2) 0%, rgba(74, 94, 70, 0.4) 100%);
 pointer-events: none;
}
/* ----------------------------------------------------------------------
 IMMERSIVE PRODUCT SHOWCASE (HOME PAGE)
 ---------------------------------------------------------------------- */
.immersive-product-row {
 position: relative;
 padding: clamp(6rem, 15vw, 12rem) 0;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 display: flex;
 align-items: center;
 min-height: 80vh;
}
.immersive-product-row::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0; bottom: 0;
 background: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.2) 100%);
 z-index: 1;
}
.immersive-product-row.reverse::before {
 background: linear-gradient(to left, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.2) 100%);
}
.immersive-product-row .container {
 position: relative;
 z-index: 2;
 display: grid;
 grid-template-columns: 1fr;
 gap: 4rem;
}
@media (min-width: 992px) {
 .immersive-product-row .container {
 grid-template-columns: 1fr 1fr;
 }
 .immersive-product-row.reverse .container {
 direction: rtl;
 }
 .immersive-product-row.reverse .container > * {
 direction: ltr;
 }
}
.immersive-content h2 {
 font-family: var(--font-display);
 font-size: clamp(4rem, 10vw, 7rem);
 text-transform: uppercase;
 letter-spacing: -0.02em;
 color: var(--color-white);
 margin-bottom: 1rem;
 line-height: 1;
}
.immersive-content p {
 font-size: clamp(1.125rem, 2vw, 1.3rem);
 color: rgba(255,255,255,0.85);
 line-height: 1.7;
 margin-bottom: 3rem;
 max-width: 600px;
}
.hud-specs {
 display: flex;
 gap: 3rem;
 margin-bottom: 3rem;
 border-left: 2px solid var(--color-secondary);
 padding-left: 2rem;
}
.hud-specs-reverse {
 border-left: none;
 padding-left: 0;
 border-right: 2px solid var(--color-secondary);
 padding-right: 2rem;
 justify-content: flex-end;
 text-align: right;
}
.hud-specs .spec-item {
 display: flex;
 flex-direction: column;
}
.hud-specs .spec-data {
 font-family: var(--font-display);
 font-size: 2.5rem;
 color: var(--color-white);
 line-height: 1;
 margin-bottom: 0.25rem;
}
.hud-specs .spec-label {
 font-family: var(--font-mono);
 font-size: 0.75rem;
 color: var(--color-secondary);
 text-transform: uppercase;
 letter-spacing: 2px;
}
/* ----------------------------------------------------------------------
 RAW ENGINEERING METRICS (NO GLASS)
 ---------------------------------------------------------------------- */
.raw-metric {
 display: flex;
 flex-direction: column;
 border-top: 1px solid rgba(255,255,255,0.1);
 padding-top: 1.5rem;
}
.raw-metric .metric-value {
 font-family: var(--font-display);
 font-size: 3rem;
 color: var(--color-white);
 line-height: 1;
 margin-bottom: 0.5rem;
 letter-spacing: -0.02em;
}
.raw-metric .metric-label {
 font-size: 0.9rem;
 color: var(--text-muted);
 text-transform: uppercase;
 letter-spacing: 0.1em;
}
/* ----------------------------------------------------------------------
 SECTION 2: THE ARSENAL (PRODUCTS)
 ---------------------------------------------------------------------- */
.arsenal-section {
 background-color: var(--color-primary-dark);
 color: var(--color-white);
 padding-top: clamp(6rem, 15vw, 12rem);
 padding-bottom: clamp(2rem, 5vw, 4rem);
}
.arsenal-header {
 text-align: center;
 margin-bottom: var(--space-3xl);
}
.arsenal-header h2 {
 font-family: var(--font-display);
 font-size: clamp(3.5rem, 8vw, 6rem);
 text-transform: uppercase;
 letter-spacing: 0.02em;
 color: var(--color-white);
 text-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.arsenal-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-xl);
}
@media (min-width: 900px) {
 .arsenal-grid {
 grid-template-columns: 1fr 1fr;
 }
}
.product-premium-card {
 background-color: var(--color-primary-dark);
 border: 1px solid rgba(255, 255, 255, 0.05);
 border-radius: var(--border-radius);
 padding: var(--space-2xl);
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
 display: flex;
 flex-direction: column;
}
.product-premium-card:hover {
 transform: translateY(-8px);
 box-shadow: 0 16px 48px rgba(74, 94, 70, 0.3);
 border-color: rgba(74, 94, 70, 0.5);
}
.product-premium-card h3 {
 font-family: var(--font-display);
 font-size: clamp(2.5rem, 4vw, 3.5rem);
 color: var(--color-white);
 margin-bottom: var(--space-md);
 letter-spacing: 0.02em;
}
.product-premium-card p {
 font-size: 1.125rem;
 line-height: 1.6;
 color: rgba(227, 231, 226, 0.7);
 margin-bottom: var(--space-xl);
}
.premium-specs {
 margin-top: auto;
 display: flex;
 justify-content: space-between;
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 padding-top: var(--space-lg);
}
.premium-spec-data {
 font-family: var(--font-display);
 font-size: 2.5rem;
 font-weight: 700;
 color: var(--color-white);
 display: block;
 line-height: 1;
 margin-bottom: 0.25rem;
}
.premium-specs .stat-label {
 color: var(--color-secondary);
 font-family: var(--font-display);
 text-transform: uppercase;
 letter-spacing: 0.1em;
 font-size: 0.85rem;
 font-weight: 700;
}
.product-premium-card .btn-outline {
 color: var(--color-white);
 border-color: rgba(255, 255, 255, 0.3);
}
.product-premium-card .btn-outline:hover {
 background-color: var(--color-secondary);
 border-color: var(--color-secondary);
 color: var(--color-primary-dark);
}
/* ----------------------------------------------------------------------
 SECTION 3: PROJECT SPEC (CONTACT)
 ---------------------------------------------------------------------- */
.contact-section {
 background-color: var(--color-primary-dark);
 color: var(--color-white);
 padding-top: clamp(2rem, 5vw, 4rem);
 padding-bottom: clamp(6rem, 15vw, 12rem);
 position: relative;
 overflow: hidden;
}
/* Glowing accent for the contact section */
.contact-section::after {
 content: '';
 position: absolute;
 bottom: -150px;
 right: -100px;
 width: 400px;
 height: 400px;
 background: radial-gradient(circle, rgba(74, 94, 70, 0.4) 0%, transparent 70%);
 pointer-events: none;
 z-index: 0;
}
.contact-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-3xl);
 align-items: center;
 position: relative;
 z-index: 1;
}
@media (min-width: 1024px) {
 .contact-grid {
 grid-template-columns: 1.2fr 0.8fr;
 }
}
.contact-content h2 {
 font-family: var(--font-display);
 font-size: clamp(4rem, 10vw, 8rem);
 text-transform: uppercase;
 letter-spacing: 0.02em;
 line-height: 0.9;
 margin-bottom: var(--space-xl);
 color: var(--color-white);
 text-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.contact-content p {
 font-size: 1.25rem;
 line-height: 1.5;
 color: rgba(227, 231, 226, 0.7);
 max-width: 30ch;
}
.premium-form {
 display: flex;
 flex-direction: column;
 gap: var(--space-xl);
 padding: var(--space-2xl) 0;
}
.premium-form-group {
 display: flex;
 flex-direction: column;
 position: relative;
}
.premium-form-group label {
 font-family: var(--font-display);
 font-size: 0.875rem;
 text-transform: uppercase;
 letter-spacing: 0.15em;
 color: rgba(45, 52, 54, 0.5);
 margin-bottom: var(--space-xs);
 font-weight: 700;
 transition: color 0.3s ease;
}
.premium-form-group input,
.premium-form-group select {
 background-color: transparent;
 border: none;
 border-bottom: 2px solid rgba(45, 52, 54, 0.2);
 padding: var(--space-sm) 0;
 font-family: var(--font-body);
 font-size: 1.5rem;
 color: var(--color-primary);
 border-radius: 0;
 transition: all 0.3s ease;
 -webkit-appearance: none;
}
.premium-form-group input::placeholder,
.premium-form-group select:invalid {
 color: rgba(45, 52, 54, 0.3);
}
.premium-form-group select {
 background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%232D3436%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
 background-repeat: no-repeat;
 background-position: right 0.5rem top 50%;
 background-size: 0.65rem auto;
 padding-right: 2rem;
}
.premium-form-group select option {
 background-color: var(--color-neutral-bg);
 color: var(--color-primary);
}
.premium-form-group input:focus,
.premium-form-group select:focus {
 outline: none;
 border-bottom-color: var(--color-accent);
 box-shadow: 0 4px 12px -8px var(--color-accent);
}
.premium-form-group:focus-within label {
 color: var(--color-primary);
}
.btn-contact {
 background-color: var(--color-secondary);
 color: var(--color-white);
 border: 1px solid var(--color-secondary);
 padding: var(--space-md) var(--space-xl);
 font-family: var(--font-display);
 font-size: 1.25rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 border-radius: var(--border-radius);
 cursor: pointer;
 transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 margin-top: var(--space-lg);
 box-shadow: 0 4px 24px rgba(74, 94, 70, 0.3);
}
.btn-contact:hover {
 background-color: transparent;
 color: var(--color-white);
 border-color: var(--color-white);
 transform: translateY(-2px);
 box-shadow: 0 8px 32px rgba(74, 94, 70, 0.5);
}
/* ==========================================================================
 NEW ARCHITECTURE COMPONENTS
 ========================================================================== */
/* Apple-Tesla Theme Global */
.apple-tesla-theme {
 background-color: var(--color-primary-dark);
 color: var(--color-white);
 font-family: var(--font-body);
}
.apple-tesla-theme h1, 
.apple-tesla-theme h2, 
.apple-tesla-theme h3, 
.apple-tesla-theme h4,
.apple-tesla-theme h5,
.apple-tesla-theme h6,
.apple-tesla-theme th,
.apple-tesla-theme strong {
 font-family: var(--font-display);
 color: var(--color-white);
}
.apple-tesla-theme .btn-outline {
 color: var(--color-white);
 border-color: var(--color-white);
}
.apple-tesla-theme .btn-outline:hover {
 background-color: var(--color-white);
 color: var(--color-primary-dark);
}
/* Sticky Specs Bar */
.sticky-specs-bar {
 background-color: var(--color-primary);
 padding: var(--space-sm) 0;
 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 color: var(--color-white);
}
/* Data Tables */
.data-table {
 width: 100%;
 border-collapse: collapse;
 margin-top: var(--space-lg);
 font-size: 1.1rem;
}
.data-table th {
 text-align: left;
 padding: var(--space-sm);
 border-bottom: 2px solid var(--color-secondary);
 color: var(--color-white);
 font-weight: 700;
}
.data-table td {
 padding: var(--space-sm);
 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Lab Document Lists */
.doc-list {
 list-style: none;
 padding: 0;
}
.doc-list li {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: var(--space-sm) 0;
 border-bottom: 1px solid rgba(255,255,255,0.1);
}
/* Responsive Grid Adjustments */
@media (max-width: 768px) {
 .sticky-specs-bar .container {
 flex-direction: column;
 align-items: center;
 gap: 10px;
 }
 .data-table, .data-table tbody, .data-table tr, .data-table th, .data-table td {
 display: block;
 }
 .data-table tr {
 margin-bottom: var(--space-sm);
 border: 1px solid rgba(255, 255, 255, 0.1);
 }
 .data-table td {
 display: flex;
 justify-content: space-between;
 text-align: right;
 }
 .data-table td::before {
 content: attr(data-label);
 font-weight: bold;
 text-align: left;
 color: var(--color-secondary-light);
 }
 .doc-list li {
 flex-direction: column;
 align-items: flex-start;
 gap: 15px;
 }
}
/* ----------------------------------------------------------------------
 PRODUCT PAGES (DARK MODE)
 ---------------------------------------------------------------------- */
.product-page {
 background-color: var(--color-primary-dark);
 color: var(--color-white);
 min-height: 100vh;
}
.product-page .site-header {
 background-color: rgba(24, 28, 26, 0.95);
 border-bottom: 1px solid rgba(255,255,255,0.05);
}
.product-page .sticky-specs-bar {
 background-color: var(--color-primary-dark);
 border-bottom: 1px solid rgba(74, 94, 70, 0.3);
}
.product-page .sticky-specs-bar span {
 color: var(--color-secondary);
 font-size: 0.85rem;
}
.product-hero {
 text-align: center;
 padding: clamp(6rem, 15vw, 10rem) 0 clamp(4rem, 10vw, 6rem);
}
.hero-cinematic {
 position: relative;
 padding: clamp(10rem, 20vw, 14rem) 0 clamp(6rem, 15vw, 10rem);
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
}
.hero-cinematic::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0; bottom: 0;
 background: linear-gradient(to bottom, rgba(24,28,26,0.3) 0%, rgba(24,28,26,0.9) 80%, var(--color-primary-dark) 100%);
 z-index: 1;
}
.hero-cinematic .container {
 position: relative;
 z-index: 2;
}
.product-hero h1, .hero-cinematic h1 {
 font-family: var(--font-display);
 font-size: clamp(5rem, 12vw, 9rem);
 text-transform: uppercase;
 letter-spacing: -0.02em;
 color: var(--color-white);
 margin-bottom: 1rem;
 text-shadow: 0 8px 32px rgba(0,0,0,0.8);
 text-wrap: balance;
}
.product-hero p.tagline, .hero-cinematic p.tagline {
 font-size: clamp(1.25rem, 2.5vw, 2.25rem);
 color: rgba(227, 231, 226, 0.9);
 max-width: 900px;
 margin: 0 auto;
 font-weight: 500;
 text-wrap: balance;
}
/* ----------------------------------------------------------------------
 EDITORIAL SPLIT LAYOUT (USPs)
 ---------------------------------------------------------------------- */
.editorial-split {
 display: grid;
 grid-template-columns: 1fr;
 gap: 4rem;
 padding: clamp(4rem, 10vw, 8rem) 0;
 align-items: center;
}
@media (min-width: 992px) {
 .editorial-split {
 grid-template-columns: 1fr 1fr;
 gap: 6rem;
 }
 .editorial-split.reverse {
 direction: rtl;
 }
 .editorial-split.reverse > * {
 direction: ltr;
 }
}
.editorial-split .image-container {
 position: relative;
 border-radius: 4px;
 overflow: hidden;
 box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.editorial-split .image-container img {
 width: 100%;
 height: auto;
 display: block;
 filter: brightness(0.9) contrast(1.1);
}
.editorial-split .text-container {
 position: relative;
}
.anchor-keyword {
 position: absolute;
 top: -50px;
 left: -20px;
 font-family: var(--font-display);
 font-size: clamp(5rem, 15vw, 12rem);
 font-weight: 800;
 color: rgba(255,255,255,0.02);
 text-transform: uppercase;
 letter-spacing: -0.04em;
 z-index: 0;
 pointer-events: none;
 line-height: 0.8;
}
.editorial-split h3 {
 position: relative;
 z-index: 1;
 font-family: var(--font-display);
 font-size: clamp(2rem, 4vw, 3.5rem);
 letter-spacing: -0.02em;
 color: var(--color-white);
 margin-bottom: 1.5rem;
 text-wrap: balance;
 line-height: 1.1;
}
.editorial-split p {
 position: relative;
 z-index: 1;
 font-size: 1.125rem;
 line-height: 1.8;
 color: var(--text-muted);
 max-width: 65ch;
}
/* Redesigned Geotech Tables for Dark Mode */
.dark-data-table {
 width: 100%;
 border-collapse: collapse;
 margin: 2rem 0;
 background: var(--color-primary-dark);
 border-radius: var(--border-radius);
 overflow: hidden;
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.dark-data-table th, .dark-data-table td {
 padding: 1.5rem;
 text-align: left;
 border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dark-data-table th {
 font-family: var(--font-display);
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: var(--color-secondary);
 font-size: 0.9rem;
 background: rgba(255,255,255,0.02);
}
.dark-data-table td {
 color: var(--color-white);
 font-size: 1.125rem;
}
.dark-data-table tr:last-child td {
 border-bottom: none;
}
/* ----------------------------------------------------------------------
 UTILITIES
 ---------------------------------------------------------------------- */
.container-narrow {
 max-width: 900px;
 margin: 0 auto;
}
.text-center {
 text-align: center;
}
.mt-xl {
 margin-top: 6rem;
}
.mb-lg {
 margin-bottom: 2rem;
}
.heading-title {
 font-family: var(--font-display);
 font-size: 2rem;
 color: var(--text-primary);
 text-transform: uppercase;
}
.text-fraction {
 font-size: 2rem;
}
.button-group-center {
 display: flex;
 gap: 1rem;
 justify-content: center;
}
/* ----------------------------------------------------------------------
 SPEC STACK COMPONENT
 ---------------------------------------------------------------------- */
.spec-stack {
 display: flex;
 flex-direction: column;
 gap: var(--space-sm);
 margin-top: 1rem;
}
.spec-stack label {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: var(--space-md) var(--space-lg);
 background: rgba(45, 52, 54, 0.02);
 border-left: 6px solid rgba(45, 52, 54, 0.1);
 margin-bottom: 0;
 cursor: pointer;
 font-family: var(--font-display);
 text-transform: uppercase;
 color: rgba(45, 52, 54, 0.7);
 transition: all 0.2s ease;
}
.spec-stack input[type="radio"] {
 display: none;
}
.spec-stack input[type="radio"]:checked + label {
 border-left-color: var(--color-accent);
 background: rgba(45, 52, 54, 0.05);
 color: var(--color-primary);
}
.spec-stack label::after {
 content: "SELECT";
 font-size: 0.75rem;
 letter-spacing: 0.1em;
 opacity: 0.3;
}
.spec-stack input[type="radio"]:checked + label::after {
 content: "SELECTED";
 opacity: 1;
 color: var(--color-accent);
}
/* Main Nav Links Hover - Polymer Skew Wave */
.main-nav .nav-link {
 position: relative;
 padding: 6px 16px;
 margin: -6px -16px;
 display: inline-block;
 z-index: 1;
 transition: color 0.3s 0.1s;
}
.main-nav .nav-link::before {
 content: '';
 position: absolute;
 inset: 0;
 background: var(--accent);
 transform: skewX(-15deg) scaleX(0);
 transform-origin: left;
 transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
 z-index: -1;
 border-radius: 2px;
 box-shadow: inset -5px 0 10px rgba(0,0,0,0.2);
}
.main-nav .nav-link:hover::before {
 transform: skewX(-15deg) scaleX(1);
}
.main-nav .nav-link:hover { color: var(--text-on-dark) !important; }
/* Dropdown Nav - Daylight Brutalist Style */
.nav-dropdown {
 position: relative;
 display: inline-block;
}
.dropdown-content {
 display: none;
 position: absolute;
 background-color: var(--bg-impact);
 min-width: 280px;
 top: calc(100% + 15px);
 left: -20px;
 z-index: 100;
 box-shadow: 0 20px 40px rgba(0,0,0,0.4);
 border: 2px solid var(--accent);
}
/* Invisible hover bridge */
.dropdown-content::before {
 content: '';
 position: absolute;
 top: -20px;
 left: 0;
 width: 100%;
 height: 20px;
 background: transparent;
}
.nav-dropdown:hover .dropdown-content {
 display: flex;
 flex-direction: column;
}
.dropdown-content a {
 color: var(--bg);
 padding: var(--space-md) var(--space-lg) var(--space-md) calc(var(--space-lg) + 12px);
 text-decoration: none;
 font-family: var(--font-display);
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 font-size: 1.125rem;
 border-bottom: 1px solid rgba(227, 231, 226, 0.1);
 transition: all 0.2s ease;
 display: flex;
 align-items: center;
 justify-content: flex-start;
 text-align: left;
 white-space: nowrap;
}
.dropdown-content a::before {
 content: '';
 display: inline-block;
 width: 0;
 height: 2px;
 background-color: var(--accent);
 transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), margin-right 0.3s ease;
}
.dropdown-content a:hover::before {
 width: 16px;
 margin-right: var(--space-sm);
}
.dropdown-content a:last-child {
 border-bottom: none;
}
.dropdown-content a:hover {
 background-color: rgba(74, 94, 70, 0.4);
 color: var(--bg);
}
/* ----------------------------------------------------------------------
 LEAD CAPTURE MODAL
 ---------------------------------------------------------------------- */
.modal-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background: rgba(0, 0, 0, 0.85);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 z-index: 1000;
 display: flex;
 justify-content: center;
 align-items: center;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-close {
 position: absolute;
 top: var(--space-md);
 right: var(--space-md);
 background: none;
 border: none;
 color: var(--text-muted);
 font-size: 2rem;
 line-height: 1;
 cursor: pointer;
 transition: color 0.2s ease;
}
.modal-close:hover {
 color: var(--text-on-dark);
}
.modal-header {
 margin-bottom: var(--space-xl);
 text-align: center;
}
.modal-title {
 font-family: var(--font-display);
 color: var(--text-on-dark);
 font-size: clamp(1.5rem, 4vw, 2rem);
 line-height: 1.1;
 margin-bottom: var(--space-sm);
}
.modal-desc {
 color: var(--text-muted);
 font-size: var(--text-md);
}
.modal-form {
 display: flex;
 flex-direction: column;
 gap: var(--space-md);
}
.form-group {
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
}
.form-group label {
 font-size: 0.875rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 color: var(--text-secondary);
}
.form-group input {
 background: rgba(0, 0, 0, 0.2);
 border: 1px solid rgba(227, 231, 226, 0.2);
 border-radius: 4px;
 padding: var(--space-md);
 color: var(--text-on-dark);
 font-family: var(--font-body);
 font-size: 1rem;
 transition: border-color 0.2s ease;
}
.form-group input:focus {
 outline: none;
 border-color: var(--accent);
}
.w-100 {
 width: 100%;
}
.mt-4 {
 margin-top: 1rem;
}
.modal-success {
 text-align: center;
 padding: var(--space-xl) 0;
}
.success-icon {
 color: var(--color-primary);
 margin-bottom: var(--space-md);
}
/* Scroll Indicator (Variant Gauge) */
.variant-gauge {
 position: absolute;
 right: 2.5rem;
 top: 50%;
 transform: translateY(-50%) !important;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 1.5rem;
 z-index: 100;
 color: var(--text-on-dark);
 translate: none !important;
}
.variant-gauge .scroll-label {
 writing-mode: vertical-rl;
 font-family: 'Barlow Condensed', sans-serif;
 font-size: 1.125rem;
 font-weight: 700;
 letter-spacing: 0.15em;
 text-transform: uppercase;
}
.variant-gauge .arrow-container {
 width: 32px;
 height: 48px;
 border: 2px solid var(--text-on-dark);
 border-radius: var(--space-xl);
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
 overflow: hidden;
}
.variant-gauge svg {
 width: 20px;
 height: 20px;
 animation: arrow-plunge 2s infinite ease-in-out;
}
@keyframes arrow-plunge {
 0% { transform: translateY(-150%); opacity: 0; }
 20% { opacity: 1; }
 80% { opacity: 1; }
 100% { transform: translateY(150%); opacity: 0; }
}
@media (max-width: 768px) {
 .variant-gauge {
 right: auto;
 left: 50%;
 top: auto;
 bottom: 2rem;
 transform: translateX(-50%) !important;
 flex-direction: row;
 gap: 1rem;
 background: transparent;
 color: var(--text-on-dark);
 padding: 0.5rem 1rem;
 border-radius: 2rem;
 box-shadow: none;
 }
 .variant-gauge .scroll-label {
 writing-mode: horizontal-tb;
 font-size: 0.875rem;
 }
 .variant-gauge .arrow-container {
 width: 24px;
 height: 36px;
 border-color: var(--text-on-dark);
 }
}
/* Contact Page Split Screen */
.contact-split-screen {
 display: grid;
 grid-template-columns: 1fr;
 min-height: 100vh;
}
.contact-left-panel {
 background-color: #A8B5A6;
 color: var(--color-ink-dark);
 display: flex;
 flex-direction: column;
 justify-content: center;
 padding: var(--space-2xl) var(--space-xl);
}
.contact-right-panel {
 background-color: var(--color-neutral-bg);
 padding: var(--space-2xl) var(--space-xl);
 display: flex;
 flex-direction: column;
 justify-content: center;
}
@media (min-width: 992px) {
 .contact-split-screen {
 grid-template-columns: 1fr 1fr;
 }
 .contact-left-panel,
 .contact-right-panel {
 padding: var(--header-height, 80px) var(--space-2xl) 0 var(--space-2xl);
 }
}
.contact-left-panel h1 {
 font-size: clamp(3rem, 6vw, 6rem);
 line-height: 0.9;
 margin-bottom: var(--space-lg);
 text-transform: uppercase;
 text-wrap: balance;
 color: var(--color-ink-dark);
}
.contact-left-panel p {
 font-size: clamp(1.25rem, 2vw, 1.75rem);
 max-width: 30ch;
 color: var(--color-ink-dark);
}
/* ----------------------------------------------------------------------
 CUSTOM SELECT UI
 ---------------------------------------------------------------------- */
.ohra-custom-select-wrapper {
 position: relative;
 width: 100%;
 font-family: inherit;
 user-select: none;
}
.custom-select-trigger {
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 100%;
 padding: 0.75rem;
 font-size: 1.1rem;
 font-weight: 600;
 color: var(--color-primary-dark);
 background-color: transparent;
 border: 1px solid var(--color-primary);
 border-radius: 0;
 cursor: pointer;
 transition: all 0.2s ease;
}
.custom-select-trigger:hover {
 background-color: rgba(45, 52, 54, 0.03);
}
.custom-select-trigger svg {
 transition: transform 0.2s ease;
}
.ohra-custom-select-wrapper.open .custom-select-trigger svg {
 transform: rotate(180deg);
}
.custom-select-options {
 position: absolute;
 top: calc(100% - 1px);
 left: 0;
 width: 100%;
 background-color: var(--bg, #E3E7E2);
 border: 1px solid var(--color-primary);
 border-top: none;
 box-shadow: 0 10px 30px rgba(0,0,0,0.15);
 z-index: 50;
 opacity: 0;
 visibility: hidden;
 transform: translateY(-5px);
 transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 max-height: 250px;
 overflow-y: auto;
}
.ohra-custom-select-wrapper.open .custom-select-options {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
}
.custom-select-option {
 padding: 0.75rem 1rem;
 font-size: 1.1rem;
 font-weight: 500;
 color: var(--color-primary-dark);
 cursor: pointer;
 transition: background-color 0.2s ease;
 border-bottom: 1px solid #eee;
}
.custom-select-option:last-child {
 border-bottom: none;
}
.custom-select-option:hover,
.custom-select-option.selected {
 background-color: var(--color-primary);
 color: var(--bg, #E3E7E2);
}
/* --- css/components/header.css --- */
/* ----------------------------------------------------------------------
 HEADER / NAVIGATION
 ---------------------------------------------------------------------- */
.site-header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 100;
 padding: var(--space-md) 0;
 transition: all 0.4s ease;
 background-color: transparent; /* Transparent initially over the hero */
}
/* When user scrolls past hero, JS adds this class */
.site-header.is-scrolled {
 background-color: rgba(20, 24, 20, 0.85); /* Dark forest transparent */
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 padding: var(--space-sm) 0;
}
.site-header .container {
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.logo h2 {
 margin: 0;
 font-size: 1.5rem;
 color: var(--text-on-dark);
 letter-spacing: 0.1em;
 font-family: var(--font-display);
}
.main-nav {
 display: none; /* Hidden on mobile by default */
}
.main-nav.is-open {
 display: flex;
 flex-direction: column;
 position: absolute;
 top: 100%;
 left: 0;
 width: 100%;
 background-color: var(--bg-impact);
 padding: var(--space-md);
 gap: var(--space-md);
 border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.mobile-menu-btn {
 display: block;
 background: transparent;
 border: none;
 color: var(--text-on-dark);
 cursor: pointer;
 padding: 0.5rem;
}
@media (min-width: 768px) {
 .main-nav {
 display: flex;
 flex-direction: row;
 position: static;
 width: auto;
 background-color: transparent;
 padding: 0;
 gap: var(--space-lg);
 align-items: center;
 border: none;
 }
 .mobile-menu-btn {
 display: none;
 }
}
.nav-link {
 font-family: var(--font-display);
 font-size: var(--text-base);
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 color: var(--text-on-dark);
 text-decoration: none;
 position: relative;
 padding: 4px 0;
}
.nav-link:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: 4px;
 border-radius: 2px;
}
/* Main Nav Links Hover - Polymer Skew Wave */
.main-nav .nav-link {
 position: relative;
 padding: 6px 16px;
 margin: -6px -16px;
 display: inline-block;
 z-index: 1;
 transition: color 0.3s 0.1s;
}
.main-nav .nav-link::before {
 content: '';
 position: absolute;
 inset: 0;
 background: var(--accent);
 transform: skewX(-15deg) scaleX(0);
 transform-origin: left;
 transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
 z-index: -1;
 border-radius: 2px;
 box-shadow: inset -5px 0 10px rgba(0,0,0,0.2);
}
.main-nav .nav-link:hover::before {
 transform: skewX(-15deg) scaleX(1);
}
.main-nav .nav-link:hover { color: var(--text-on-dark) !important; }
/* Dropdown Nav - Daylight Brutalist Style */
.nav-dropdown {
 position: relative;
 display: inline-block;
}
.dropdown-content {
 display: none;
 position: absolute;
 background-color: var(--bg-impact);
 min-width: 280px;
 top: calc(100% + 15px);
 left: -20px;
 z-index: 100;
 box-shadow: 0 20px 40px rgba(0,0,0,0.4);
 border: 2px solid var(--accent);
}
/* Invisible hover bridge */
.dropdown-content::before {
 content: '';
 position: absolute;
 top: -20px;
 left: 0;
 width: 100%;
 height: 20px;
 background: transparent;
}
.nav-dropdown:hover .dropdown-content {
 display: flex;
 flex-direction: column;
}
.dropdown-content a {
 color: var(--bg);
 padding: var(--space-md) var(--space-lg) var(--space-md) calc(var(--space-lg) + 12px);
 text-decoration: none;
 font-family: var(--font-display);
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 font-size: 1.125rem;
 border-bottom: 1px solid rgba(227, 231, 226, 0.1);
 transition: all 0.2s ease;
 display: flex;
 align-items: center;
 justify-content: flex-start;
 text-align: left;
 white-space: nowrap;
}
.dropdown-content a::before {
 content: '';
 display: inline-block;
 width: 0;
 height: 2px;
 background-color: var(--accent);
 transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), margin-right 0.3s ease;
}
.dropdown-content a:hover::before {
 width: 16px;
 margin-right: var(--space-sm);
}
.dropdown-content a:last-child {
 border-bottom: none;
}
.dropdown-content a:hover {
 background-color: rgba(74, 94, 70, 0.4);
 color: var(--bg);
}
/* --- css/components/footer.css --- */
/* ----------------------------------------------------------------------
 FOOTER
 ---------------------------------------------------------------------- */
.site-footer {
 background-color: var(--bg-impact);
 color: var(--text-muted);
 padding: var(--space-3xl) 0 max(var(--space-lg), env(safe-area-inset-bottom));
}
/* IMPECCABLE ADAPT: TOUCH & MOBILE OPTIMIZATIONS */
body {
 padding-top: env(safe-area-inset-top);
 padding-left: env(safe-area-inset-left);
 padding-right: env(safe-area-inset-right);
}
@media (pointer: coarse) {
 .btn { padding: calc(var(--space-sm) + 4px) calc(var(--space-lg) + 8px); }
 .nav-link { padding: 8px 0; }
 .btn:active, .card:active { transform: scale(0.98); transition-duration: 0.1s; }
}
.footer-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-2xl);
 margin-bottom: var(--space-2xl);
}
@media (min-width: 768px) {
 .footer-grid {
 grid-template-columns: 2fr 1fr 1fr;
 }
}
.footer-logo img {
 height: 30px;
 margin-bottom: var(--space-md);
 opacity: 0.8;
}
.footer-heading {
 color: var(--text-on-dark);
 font-family: var(--font-display);
 font-size: var(--text-lg);
 margin-bottom: var(--space-md);
}
.footer-links {
 list-style: none;
}
.footer-links li {
 margin-bottom: var(--space-sm);
}
.footer-links a {
 color: var(--text-muted);
}
.footer-links a:hover {
 color: var(--text-on-dark);
}
.footer-bottom {
 border-top: 1px solid rgba(255,255,255,0.1);
 padding-top: var(--space-lg);
 display: flex;
 flex-direction: column;
 gap: var(--space-md);
 align-items: center;
 font-size: var(--text-sm);
}
@media (min-width: 768px) {
 .footer-bottom {
 flex-direction: row;
 justify-content: space-between;
 }
}
/* --- css/footer.css --- */
/* ----------------------------------------------------------------------
 SITE FOOTER
 ---------------------------------------------------------------------- */
.site-footer {
 position: relative;
 overflow: hidden;
 background-color: var(--color-primary); /* Deep Charcoal */
 color: var(--text-on-dark); /* Stone / light text */
 padding: var(--space-xl) 0 var(--space-xl); /* Reduced massive top padding */
}
.site-footer-inner {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: var(--space-2xl);
 align-items: stretch;
}
.footer-logo-zone {
 position: relative;
 display: flex;
 align-items: flex-start;
 min-height: 350px; /* Give the massive watermark enough room */
}
.footer-watermark {
 position: absolute;
 left: -2%; /* Pull it slightly off screen */
 bottom: -0.25em; /* Sink it deep using font-relative units so it scales perfectly */
 font-family: var(--font-display);
 font-weight: 700;
 font-size: clamp(10rem, 28vw, 32rem); /* Massive scale */
 line-height: 0.75;
 letter-spacing: -0.04em;
 color: var(--text-on-dark);
 opacity: 0.15; /* slightly brighter since we are masking it */
 pointer-events: none; /* Let clicks pass through to SVG */
 z-index: 1;
 white-space: nowrap; /* Prevent wrapping */
 /* The crazy dissolve effect - stretched out so it doesn't clip the A */
 -webkit-mask-image: linear-gradient(to right, black 20%, transparent 100%);
 mask-image: linear-gradient(to right, black 20%, transparent 100%);
 transform-origin: left bottom;
}
.footer-svg-container {
 position: relative;
 z-index: 2;
 /* When the SVG drops in, it will sit on top of the watermark */
 width: 320px; 
 height: 120px;
}
.footer-links-zone {
 display: flex;
 flex-direction: column;
 justify-content: flex-end; /* Push links to the bottom */
 align-items: flex-end;
 gap: var(--space-xl);
}
@media (max-width: 768px) {
 .footer-links-zone {
 align-items: flex-start;
 }
}
.footer-nav {
 display: flex;
 flex-direction: row;
 gap: 3rem;
 text-align: right;
}
@media (max-width: 768px) {
 .footer-nav {
 flex-direction: column;
 text-align: left;
 }
}
.footer-link {
 font-family: var(--font-body);
 font-weight: 400;
 font-size: 1.125rem;
 color: rgba(227, 231, 226, 0.7); /* Stone color, semi-transparent */
 text-decoration: none;
 transition: color 0.2s ease;
}
.footer-link:hover {
 color: rgba(227, 231, 226, 1);
}
.footer-copyright {
 font-family: var(--font-display);
 font-size: 0.875rem;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 color: rgba(227, 231, 226, 0.4);
}
@media (max-width: 768px) {
 .site-footer {
 padding: var(--space-md) 0 !important;
 }
 .site-footer-inner {
 grid-template-columns: 1fr;
 gap: var(--space-md) !important;
 }
 .footer-logo-zone {
 min-height: 60px !important;
 }
 .footer-watermark {
 display: none !important;
 }
 .footer-svg-container {
 height: 40px !important;
 width: 100% !important;
 }
 .footer-svg-container img {
 max-height: 40px !important;
 }
}
/* --- css/components/modal.css --- */
/* ----------------------------------------------------------------------
 LEAD CAPTURE MODAL (SLIDE-OUT)
 ---------------------------------------------------------------------- */
dialog#lead-capture-modal {
 position: fixed;
 inset: 0 0 0 auto;
 margin: 0;
 height: 100vh;
 max-height: 100vh;
 width: fit-content;
 min-width: min(100vw, 480px);
 max-width: 50vw;
 background: var(--bg);
 border: none;
 border-left: 1px solid var(--border-subtle);
 border-radius: 0;
 padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
 box-sizing: border-box;
 overflow-y: auto;
 box-shadow: -20px 0 60px rgba(45, 52, 54, 0.08);
 color: var(--text-primary);
 opacity: 0;
 transform: translateX(100%);
 transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), display 0.6s allow-discrete;
}
dialog#lead-capture-modal[open] {
 opacity: 1;
 transform: translateX(0);
}
@starting-style {
 dialog#lead-capture-modal[open] {
 opacity: 0;
 transform: translateX(100%);
 }
}
dialog#lead-capture-modal::backdrop {
 background: rgba(227, 231, 226, 0.6); /* Daylight tint instead of black */
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 opacity: 0;
 transition: opacity 0.5s ease, display 0.5s allow-discrete;
}
dialog#lead-capture-modal[open]::backdrop {
 opacity: 1;
}
@starting-style {
 dialog#lead-capture-modal[open]::backdrop {
 opacity: 0;
 }
}
.modal-close {
 position: absolute;
 top: clamp(1rem, 3vw, 2rem);
 right: clamp(1rem, 3vw, 2rem);
 background: transparent;
 border: 1px solid transparent;
 border-radius: 50%;
 width: 48px;
 height: 48px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--text-primary);
 font-size: 2rem;
 line-height: 1;
 cursor: pointer;
 transition: all 0.3s ease;
}
.modal-close:hover {
 color: var(--text-on-dark);
 background: var(--text-primary);
 transform: rotate(90deg);
}
.modal-header {
 margin-bottom: var(--space-2xl);
 text-align: left;
}
.modal-title {
 font-family: var(--font-display);
 color: var(--text-primary);
 font-size: clamp(2.5rem, 5vw, 3.5rem);
 text-transform: uppercase;
 line-height: 0.95;
 margin-bottom: var(--space-sm);
 letter-spacing: -0.02em;
}
.modal-desc {
 color: var(--text-secondary);
 font-size: var(--text-md);
 line-height: 1.5;
 max-width: 90%;
}
.modal-form {
 display: flex;
 flex-direction: column;
 gap: var(--space-xl);
}
.form-row {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: var(--space-lg);
 margin-bottom: var(--space-xl);
}
@media (max-width: 480px) {
 .form-row {
 grid-template-columns: 1fr;
 }
}
.form-group {
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
 position: relative;
}
.form-group label {
 font-family: var(--font-display);
 font-size: 1rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 color: var(--text-muted);
 transition: color 0.3s ease;
}
.form-group input {
 background: transparent;
 border: none;
 border-bottom: 2px solid rgba(45, 52, 54, 0.15);
 border-radius: 0;
 padding: var(--space-sm) 0;
 color: var(--text-primary);
 font-family: var(--font-body);
 font-size: 1.125rem;
 transition: border-color 0.4s ease, transform 0.4s ease;
 width: 100% !important;
 min-width: 100%;
 box-sizing: border-box;
 display: block;
}
.form-group input:focus {
 outline: none;
 border-bottom-color: var(--text-primary);
}
.form-group:focus-within label {
 color: var(--text-primary);
}
.form-group input::placeholder {
 color: var(--text-muted);
 opacity: 0.3;
}
.w-100 {
 width: 100% !important;
 box-sizing: border-box;
 display: block;
 text-align: center;
}
.modal-form .btn {
 width: 100% !important;
 margin-top: var(--space-md);
 padding: var(--space-md) var(--space-sm);
 font-size: 1.125rem;
 background-color: var(--text-primary);
 color: var(--bg);
 position: relative;
 overflow: hidden;
 z-index: 1;
}
.modal-form .btn::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background-color: var(--accent);
 transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 z-index: -1;
}
.modal-form .btn:hover::before {
 transform: translateX(100%);
}
.modal-form .btn:hover {
 box-shadow: none;
 transform: none;
}
.mt-4 {
 margin-top: 1.5rem;
}
/* Success State */
.modal-success {
 text-align: left;
 padding: var(--space-xl) 0;
 display: flex;
 flex-direction: column;
 height: 100%;
 justify-content: center;
}
.success-icon {
 color: var(--accent);
 margin-bottom: var(--space-lg);
 width: 64px;
 height: 64px;
}
.modal-success h3 {
 font-family: var(--font-display);
 color: var(--text-primary);
 font-size: clamp(3rem, 6vw, 4.5rem);
 text-transform: uppercase;
 line-height: 0.9;
 margin-bottom: var(--space-md);
 letter-spacing: -0.03em;
}
.modal-success p {
 color: var(--text-secondary);
 font-size: var(--text-lg);
 line-height: 1.5;
}
/* --- css/components/cards.css --- */
/* ----------------------------------------------------------------------
 CARDS
 ---------------------------------------------------------------------- */
.card {
 background-color: var(--bg);
 border-radius: var(--border-radius);
 padding: var(--space-xl);
 display: flex;
 flex-direction: column;
 height: 100%;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 border: 1px solid var(--border-subtle);
}
.card:hover {
 transform: translateY(-5px);
 box-shadow: var(--shadow-md);
}
.card-icon {
 font-size: 2rem;
 margin-bottom: var(--space-md);
 color: var(--accent);
}
.card-title {
 margin-bottom: var(--space-sm);
}
.card-content {
 flex-grow: 1;
 color: var(--text-secondary);
}
/* --- css/components/buttons.css --- */
/* ==========================================================================
 OHRA HYDRO POLYMERS - COMPONENTS
 ========================================================================== */
/* ----------------------------------------------------------------------
 BUTTONS & LINKS
 ---------------------------------------------------------------------- */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: var(--space-sm) var(--space-lg);
 font-family: var(--font-display);
 font-size: var(--text-lg);
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 border-radius: var(--border-radius);
 transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s cubic-bezier(0.25, 1, 0.5, 1);
 cursor: pointer;
 text-decoration: none;
 border: 2px solid transparent;
}
.btn:active {
 transform: scale(0.97) translateY(0);
 transition-duration: 0.1s;
}
.btn-primary {
 background-color: var(--accent);
 color: var(--text-on-brand);
}
.btn-primary:hover {
 background-color: var(--accent-hover);
 color: var(--text-on-brand);
 transform: translateY(-2px) scale(1.02);
 box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.btn-outline {
 background-color: transparent;
 color: var(--text-primary);
 border-color: var(--text-primary);
}
.btn-outline:hover {
 background-color: var(--text-primary);
 color: var(--text-on-dark);
 transform: translateY(-2px) scale(1.02);
}
.theme-dark .btn-outline {
 color: var(--text-on-dark);
 border-color: var(--text-on-dark);
}
.theme-dark .btn-outline:hover {
 background-color: var(--text-on-dark);
 color: var(--text-primary);
 transform: translateY(-2px) scale(1.02);
}
.btn:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: 2px;
}
.btn-sm {
 padding: 0.25rem 1rem;
 font-size: 1rem;
}
/* --- css/components/hero-canvas.css --- */
/* ----------------------------------------------------------------------
 SCROLL HERO (APPLE STYLE)
 ---------------------------------------------------------------------- */
.hero-scroll-container {
 position: relative;
 height: 400vh; /* Tighter scroll duration for a punchier experience */
 width: 100%;
 background-color: var(--color-primary-dark); /* Behind the canvas */
}
.hero-sticky-wrap {
 position: sticky;
 top: 0;
 width: 100%;
 height: 100vh;
 overflow: hidden;
}
.hero-canvas {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 will-change: transform;
 z-index: 1;
}
/* The gradient overlay ensures text is readable and edges blend into next section */
.hero-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(
 to bottom,
 rgba(0,0,0,0.4) 0%,
 rgba(0,0,0,0.1) 40%,
 rgba(0,0,0,0.1) 60%,
 rgba(0,0,0,0.7) 100%
 );
 z-index: 2;
 pointer-events: none;
}
.hero-text-layer {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 3;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
 padding: var(--space-xl);
 pointer-events: none; /* Let clicks pass through if needed */
}
/* Individual text blocks that will fade in and out via GSAP */
.hero-text-block {
 position: absolute;
 opacity: 0;
 transform: translateY(20px);
 width: 100%;
 max-width: 800px;
 padding: 0 var(--space-md);
 pointer-events: auto; /* Allow picking and interaction */
}
.hero-text-block h1,
.hero-text-block h2,
.hero-text-block h3 {
 color: #ffffff !important;
 margin-bottom: var(--space-sm);
 text-shadow: 0 4px 20px rgba(0,0,0,0.85), 0 2px 6px rgba(0,0,0,0.9);
}
.hero-text-block p {
 color: rgba(227, 231, 226, 0.9); /* Stone slightly transparent */
 font-size: var(--text-lg);
 text-shadow: 0 2px 4px rgba(0,0,0,0.5);
 margin: 0 auto;
}
.hero-cta {
 margin-top: var(--space-lg);
 display: flex;
 gap: var(--space-md);
 justify-content: center;
 pointer-events: auto; /* Re-enable clicks for buttons */
}
/* --- css/pseo.css --- */
/* pSEO Editorial Landing Page Styles */
.editorial-container {
 max-width: var(--container-width, 1600px);
 margin: 0 auto;
 padding: var(--space-xl) var(--space-md);
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--space-2xl);
 flex: 1;
 }
 @media (min-width: 1024px) {
 .editorial-container {
 grid-template-columns: 3fr 8fr;
 align-items: start;
 }
 }
 .hero-header {
 grid-column: 1 / -1;
 padding-bottom: var(--space-xl);
 border-bottom: 4px solid var(--color-primary);
 margin-bottom: var(--space-lg);
 }
 .hero-label {
 font-family: var(--font-display);
 font-size: var(--text-base);
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: var(--text-secondary);
 margin-bottom: var(--space-sm);
 display: block;
 }
 h1.display-title {
 font-family: var(--font-display);
 font-size: clamp(2rem, 3vw + 1rem, 4rem);
 line-height: 1.1;
 text-transform: uppercase;
 color: var(--color-primary-dark);
 max-width: 30ch;
 letter-spacing: -0.01em;
 margin: 0;
 }
 .meta-sidebar {
 position: sticky;
 top: var(--space-2xl);
 }
 .meta-block {
 border-bottom: 2px solid var(--color-primary);
 padding: var(--space-sm) 0;
 }
 .meta-block:last-child {
 border-bottom: none;
 }
 .meta-label {
 font-family: var(--font-display);
 font-size: var(--text-sm);
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: var(--text-secondary);
 margin-bottom: 4px;
 display: block;
 }
 .meta-value {
 font-size: var(--text-lg);
 font-weight: 600;
 }
 .article-content {
 font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
 line-height: 1.6;
 max-width: 70ch;
 }
 .article-content h2 {
 font-family: var(--font-display);
 font-size: var(--text-3xl);
 line-height: 1;
 text-transform: uppercase;
 margin: var(--space-xl) 0 var(--space-lg) 0;
 color: var(--color-primary-dark);
 letter-spacing: -0.01em;
 }
 .article-content p {
 margin-bottom: var(--space-lg);
 }
 .article-content strong {
 font-weight: 600;
 color: var(--color-primary-dark);
 }
 .spec-hud {
 border-top: 4px solid var(--color-primary);
 border-bottom: 4px solid var(--color-primary);
 padding: var(--space-xl) 0;
 margin: var(--space-2xl) 0;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: var(--space-lg);
 }
 .spec-item {
 display: flex;
 flex-direction: column;
 border-left: 2px solid var(--border-subtle);
 padding-left: var(--space-md);
 }
 .spec-item:first-child {
 border-left: none;
 padding-left: 0;
 }
 .spec-number {
 font-family: var(--font-display);
 font-size: clamp(3rem, 2.5rem + 2vw, 4.5rem);
 line-height: 1;
 color: var(--color-primary-dark);
 }
 .spec-desc {
 font-size: var(--text-sm);
 text-transform: uppercase;
 letter-spacing: 0.05em;
 color: var(--text-secondary);
 margin-top: var(--space-xs);
 font-weight: 600;
 }