/* ============================================================ CRITICAL CSS — Inline in | Wickbond Manufacturing Render-blocking. Target ≤ 30KB. Contains ONLY what is needed for first viewport render plus FOUC prevention pre-hide states. Covers: Tokens, Reset, Font declarations, Typography base, Body background, Container skeleton, Header (pill + dot), Hero (all variants), Trustbar, Glass card solid fallback, Button structure, Icons, Skip link, SR-only, Honeypot, Label tech, FOUC prevention, SVG color preload ============================================================ */ /* ———————————————————————————————————————————— FONT DECLARATIONS font-display: swap prevents FOIT ———————————————————————————————————————————— */ @font-face { font-family: 'Inter'; src: url('../fonts/Inter/Inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153; size-adjust: 105%; } @font-face { font-family: 'Inter'; src: url('../fonts/Inter/Inter-Italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153; size-adjust: 105%; } @font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/Cormorant_Garamond/CormorantGaramond.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153; } @font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/Cormorant_Garamond/CormorantGaramond-Italic.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153; } /* ———————————————————————————————————————————— DESIGN TOKENS ———————————————————————————————————————————— */ :root { /* Colors — Brand */ --color-bg: #faf9f6; --color-bg-alt: #f5f4f1; --color-navy: #002366; --color-navy-light: #003399; --color-navy-dark: #001744; --color-gold: #d4af37; --color-gold-dark: #b8962e; --color-ink: #0a1128; --color-slate: #5d6d7e; --color-white: #fff; /* Colors — Feedback */ --color-error: #dc2626; --color-error-light: #fef2f2; --color-error-border: #fecaca; --color-warning: #d97706; --color-warning-light: #fffbeb; --color-success: #16a34a; --color-success-light: #f0fdf4; --color-info: #0284c7; /* Colors — Text */ --color-text-primary: rgba(10, 17, 40, 0.92); --color-text-secondary: rgba(10, 17, 40, 0.72); --color-text-tertiary: rgba(10, 17, 40, 0.56); --color-text-muted: rgba(10, 17, 40, 0.4); /* Colors — Borders */ --color-border: rgba(10, 17, 40, 0.1); --color-border-hover: rgba(212, 175, 55, 0.55); /* Glass */ --glass-bg: rgba(255, 255, 255, 0.55); --glass-bg-hover: rgba(255, 255, 255, 0.7); --glass-bg-solid: #f9f8f6; --glass-border: rgba(255, 255, 255, 0.6); --glass-border-bottom: rgba(212, 175, 55, 0.2); --glass-blur: 16px; --glass-saturate: 1.8; /* Typography */ --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-size-base: 15px; --line-height-base: 1.7; --line-height-tight: 1.25; /* Spacing */ --space-2xs: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; /* Layout */ --container-max: 1200px; --content-max-width: 70ch; --content-narrow: 60ch; /* Header */ --header-height: 74px; --header-height-mobile: 62px; /* Dot Mode */ --dot-mode-size: 60px; --dot-mode-size-mobile: 54px; --dot-mode-logo-size: 32px; --dot-mode-logo-size-mobile: 28px; --ring-size: 60px; --ring-size-mobile: 54px; --optical-adjust-y: -1px; /* Radii */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px; /* Shadows — First paint only */ --shadow-sm: 0 2px 8px rgba(0, 35, 102, 0.06); --shadow-md: 0 8px 32px rgba(0, 35, 102, 0.08); --shadow-lg: 0 20px 50px rgba(0, 35, 102, 0.12); --shadow-gold: 0 12px 32px rgba(212, 175, 55, 0.25); --shadow-gold-strong: 0 16px 40px rgba(212, 175, 55, 0.35); --shadow-glass: 0 8px 32px rgba(0, 35, 102, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6); --shadow-dot-mode: 0 8px 32px rgba(0, 35, 102, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(212, 175, 55, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8); /* Easing */ --ease-smooth: cubic-bezier(0.19, 1, 0.22, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* Duration */ --duration-instant: 200ms; --duration-fast: 250ms; --duration-smooth: 350ms; --duration-complex: 500ms; --stagger-delay: 50ms; /* Z-Index Scale */ --z-dropdown: 100; --z-sticky: 500; --z-mobile-nav: 999; --z-header: 1000; --z-modal: 2000; --z-skip-link: 10000; /* Focus */ --focus-ring-color: var(--color-gold); --focus-ring-width: 2px; --focus-ring-offset: 3px; } /* ———————————————————————————————————————————— RESET ———————————————————————————————————————————— */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-padding-top: calc(var(--header-height) + var(--space-lg)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -moz-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-text-primary); background: linear-gradient(135deg, #faf9f6 0%, #f8f6f0 25%, #fbf9f4 50%, #f5f3ee 75%, #fdfcf9 100%); background-attachment: scroll; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; overflow-x: hidden; min-height: 100vh; } @media (min-width: 769px) and (hover: hover) { body { background-attachment: fixed; } } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse 80% 50% at 0% 0%, rgb(212 175 55 / .07), transparent 50%), radial-gradient(ellipse 60% 40% at 100% 100%, rgb(0 35 102 / .06), transparent 50%), radial-gradient(ellipse 50% 50% at 50% 30%, rgb(212 175 55 / .04), transparent 40%); contain: strict; } /* ———————————————————————————————————————————— MEDIA DEFAULTS ———————————————————————————————————————————— */ img, svg, video, picture { display: block; max-width: 100%; height: auto; } img, video { vertical-align: middle; } /* ———————————————————————————————————————————— FOCUS — Accessibility critical ———————————————————————————————————————————— */ :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } /* ———————————————————————————————————————————— SELECTION ———————————————————————————————————————————— */ ::selection { background: rgb(212 175 55 / .25); color: var(--color-navy); } /* ———————————————————————————————————————————— BASE ELEMENT RESETS ———————————————————————————————————————————— */ a { color: inherit; text-decoration: none; } button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul, ol { list-style: none; } button, [role="button"] { -webkit-user-select: none; user-select: none; } /* ———————————————————————————————————————————— TABULAR NUMERALS — Critical selectors only ———————————————————————————————————————————— */ .tabular-nums, [data-numeric], time, td, th { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ———————————————————————————————————————————— TYPOGRAPHY ———————————————————————————————————————————— */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 300; line-height: var(--line-height-tight); color: var(--color-navy); letter-spacing: -.02em; margin: 0; } h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); } h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); } h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 400; } h4 { font-size: 1.125rem; font-weight: 500; } h5 { font-size: 1rem; font-weight: 500; } h6 { font-size: .875rem; font-weight: 600; } h1, h2 { margin-top: var(--space-2xl); margin-bottom: var(--space-lg); } h3, h4 { margin-top: var(--space-xl); margin-bottom: var(--space-md); } h5, h6 { margin-top: var(--space-lg); margin-bottom: var(--space-sm); } :where(section, article, aside, main, .content, .container)> :first-child { margin-top: 0; } p { margin: 0 0 var(--space-md); max-width: var(--content-max-width); color: var(--color-text-secondary); } strong, b { font-weight: 600; color: var(--color-text-primary); } a, label { font-weight: 500; } small { font-size: .875em; } /* ———————————————————————————————————————————— LAYOUT ———————————————————————————————————————————— */ .container { width: min(var(--container-max), calc(100% - var(--space-xl))); margin-inline: auto; } .section { padding-block: var(--space-3xl); position: relative; } .section-header { margin-bottom: var(--space-lg); } .header-spacer { height: 108px; } /* ———————————————————————————————————————————— GLASS CARD — Solid fallback only (critical) Blur enhancement loaded in main.css ———————————————————————————————————————————— */ .glass-card { background: var(--glass-bg-solid); border-radius: var(--radius-md); border: 1px solid var(--glass-border); border-bottom-color: var(--glass-border-bottom); contain: layout style; } /* ———————————————————————————————————————————— LABEL TECH — First section header component ———————————————————————————————————————————— */ .label-tech { display: inline-flex; align-items: center; gap: var(--space-sm); font-family: var(--font-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-slate); margin-bottom: var(--space-md); } .label-tech::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-gold); box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15); } /* ———————————————————————————————————————————— BUTTONS — Structure only, no hover/transitions ———————————————————————————————————————————— */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 14px 28px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: transparent; color: var(--color-navy); white-space: nowrap; } .btn svg { width: 16px; height: 16px; flex-shrink: 0; } .btn--primary { background: linear-gradient(180deg, var(--color-gold), var(--color-gold-dark)); border-color: var(--color-gold); color: var(--color-ink); box-shadow: var(--shadow-gold); } .btn--navy { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); box-shadow: 0 12px 32px rgb(0 35 102 / .2); } .btn--white { background: rgb(255 255 255 / .95); border-color: rgb(255 255 255 / .8); color: var(--color-navy); box-shadow: 0 8px 24px rgb(0 0 0 / .15); } .btn--ghost { border-color: rgb(255 255 255 / .4); color: var(--color-white); } .btn--lg { padding: 18px 36px; font-size: 13px; } /* ———————————————————————————————————————————— ICONS ———————————————————————————————————————————— */ .icon { width: 24px; height: 24px; display: inline-block; vertical-align: middle; fill: currentColor; } .icon-sm { width: 18px; height: 18px; } .icon-lg { width: 32px; height: 32px; } /* ———————————————————————————————————————————— BRAND ———————————————————————————————————————————— */ .brand-wrapper { display: flex; align-items: center; flex-shrink: 0; background: transparent; border: none; box-shadow: none; padding: 0; margin-left: 0; margin-right: var(--space-md); overflow: visible; } .brand-link { display: flex; align-items: center; gap: var(--space-md); text-decoration: none; color: inherit; } .logo-nav { display: block; height: 65px; width: auto; max-width: none; background: transparent; border: none; box-shadow: none; overflow: visible; transform-origin: left center; } /* ———————————————————————————————————————————— HEADER — Pill Mode (Default / Initial State) ———————————————————————————————————————————— */ .morph-header { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: var(--z-header); padding: 4px 8px 4px 0; background: var(--glass-bg-solid); border-radius: var(--radius-full); border: 1px solid var(--glass-border); box-shadow: var(--shadow-glass); contain: layout style; } .morph-header.pill-mode { width: min(95%, 1100px); height: var(--header-height); } /* ———————————————————————————————————————————— HEADER — Dot Mode (Scrolled state) Structural positioning only — no hover ———————————————————————————————————————————— */ .morph-header.dot-mode { top: 24px; left: auto; right: 24px; transform: none; width: var(--dot-mode-size); height: var(--dot-mode-size); padding: 0; border-radius: 50%; background: var(--color-white); cursor: pointer; box-shadow: var(--shadow-dot-mode); display: flex; align-items: center; justify-content: center; } /* Scroll-restored page load — prevent pill→dot flash */ .js.scrolled .morph-header { left: auto; right: 24px; transform: none; width: var(--dot-mode-size); height: var(--dot-mode-size); border-radius: 50%; padding: 0; } /* ———————————————————————————————————————————— HEADER INNER ———————————————————————————————————————————— */ .header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; } .brand-text { display: flex; flex-direction: column; justify-content: center; line-height: 1; } .brand-name { font-family: var(--font-heading); font-size: 18px; font-weight: 600; color: var(--color-navy); letter-spacing: .02em; } .brand-tagline { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--color-slate); margin-top: var(--space-xs); } /* ———————————————————————————————————————————— DOT MODE — Element visibility overrides ———————————————————————————————————————————— */ .morph-header.dot-mode .header-inner { display: flex; } .morph-header.dot-mode .brand-wrapper { position: static; margin: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .morph-header.dot-mode .brand-text { opacity: 0; pointer-events: none; position: absolute; visibility: hidden; } .morph-header.dot-mode .logo-nav { position: relative; z-index: 5; width: var(--dot-mode-logo-size); height: var(--dot-mode-logo-size); max-width: var(--dot-mode-logo-size); max-height: var(--dot-mode-logo-size); margin: auto; pointer-events: none; transform: translateY(var(--optical-adjust-y)); } /* ———————————————————————————————————————————— NAVIGATION — Structure only ———————————————————————————————————————————— */ .nav-links { display: flex; align-items: center; gap: var(--space-sm); } .morph-header.dot-mode .nav-links { display: none; pointer-events: none; visibility: hidden; } .nav-link { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-secondary); padding: 10px 14px; border-radius: 25px; position: relative; } /* Active state is structural — needed on load */ .nav-link.is-active { color: var(--color-navy); background: rgb(0 35 102 / .05); } /* ———————————————————————————————————————————— NAV CTA BUTTON — Structure only ———————————————————————————————————————————— */ .nav-cta-btn { display: flex; align-items: center; gap: 6px; padding: var(--space-sm) var(--space-md); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; background: var(--color-navy); color: var(--color-white); border-radius: 25px; margin-left: 8px; margin-right: 0; position: relative; z-index: 10; } .nav-cta-btn svg { width: 14px; height: 14px; } .morph-header.dot-mode .nav-cta-btn { opacity: 0; pointer-events: none; } /* ———————————————————————————————————————————— MENU TOGGLE — Structure only ———————————————————————————————————————————— */ .menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--color-navy); } .menu-toggle .icon-close { display: none; } .menu-toggle[aria-expanded="true"] .icon-menu { display: none; } .menu-toggle[aria-expanded="true"] .icon-close { display: block; } .morph-header.dot-mode .menu-toggle { display: none; } /* ———————————————————————————————————————————— DOT TRIGGER — Structure only ———————————————————————————————————————————— */ .dot-trigger { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; background: transparent; border: none; cursor: pointer; z-index: 30; opacity: 0; pointer-events: none; } .morph-header.dot-mode .dot-trigger { opacity: 1; pointer-events: auto; } .morph-header.dot-mode .dot-trigger:focus-visible { outline: 3px solid var(--color-navy); outline-offset: 4px; border-radius: 50%; box-shadow: 0 0 0 6px rgb(0 35 102 / .1); } /* ———————————————————————————————————————————— RING CONTAINER & PULSE RING — Structure ———————————————————————————————————————————— */ .ring-container { position: absolute; top: 0; left: 0; width: var(--ring-size); height: var(--ring-size); pointer-events: none; opacity: 0; visibility: hidden; z-index: 20; } .ring-container svg { width: 100%; height: 100%; display: block; overflow: visible; } .pulse-ring { position: absolute; width: var(--ring-size); height: var(--ring-size); border: 2px solid var(--color-gold); border-radius: 50%; opacity: 0; pointer-events: none; } /* ———————————————————————————————————————————— HERO — Full styling (always above fold) ———————————————————————————————————————————— */ .hero { position: relative; overflow: hidden; } .hero-visual { position: relative; min-height: 600px; display: flex; align-items: center; border-radius: 0 0 var(--radius-xl) var(--radius-xl); overflow: hidden; background: linear-gradient(145deg, #2a3a5c, #1a2744 50%, #0f1a2e); contain: layout paint; } .hero-visual picture, .hero-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-visual img { aspect-ratio: 16 / 9; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgb(0 18 51 / .75), rgb(0 35 102 / .5) 50%, rgb(0 18 51 / .6)); pointer-events: none; } .hero-content { position: relative; z-index: 2; width: min(var(--container-max), calc(100% - var(--space-xl))); margin: 0 auto; padding: var(--space-3xl) 0; max-width: 720px; } .hero-badge { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--color-gold); margin-bottom: var(--space-lg); } .hero-badge::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-gold); box-shadow: 0 0 0 4px rgb(212 175 55 / .25); } .hero-title { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 300; color: var(--color-white); line-height: 1.1; margin-bottom: var(--space-lg); text-shadow: 0 2px 20px rgb(0 0 0 / .3); } .hero-desc { font-size: 17px; line-height: 1.7; color: rgb(255 255 255 / .85); max-width: 56ch; margin-bottom: var(--space-xl); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); } .hero-accent { position: absolute; bottom: var(--space-xl); left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); border-radius: var(--radius-full); } /* ———————————————————————————————————————————— HERO — Subpage variant (critical for subpages) Prevents CLS from 600px → 320px snap ———————————————————————————————————————————— */ .hero--subpage .hero-visual { min-height: 320px; } .hero--subpage .hero-content { padding: var(--space-2xl) 0; } .hero--subpage .hero-title { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: var(--space-md); } .hero--subpage .hero-desc { font-size: 16px; max-width: 60ch; } /* ———————————————————————————————————————————— BREADCRUMB — Subpage hero color pre-set Prevents dark text flash on hero background ———————————————————————————————————————————— */ .hero .breadcrumb, .hero .breadcrumb-list, .hero .breadcrumb a, .hero .breadcrumb-link { color: rgba(255, 255, 255, 0.7); } .hero .breadcrumb span[aria-current="page"], .hero .breadcrumb-current { color: var(--color-white); } .hero .breadcrumb-separator { color: rgba(255, 255, 255, 0.5); } /* ———————————————————————————————————————————— TRUSTBAR ———————————————————————————————————————————— */ .trustbar { width: 100%; margin-top: calc(-1 * var(--space-xl)); padding: var(--space-lg) 0; position: relative; z-index: 10; } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } .trust-item { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-lg); } .trust-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-sm); background: rgb(212 175 55 / .12); border: 1px solid rgb(212 175 55 / .3); display: flex; align-items: center; justify-content: center; color: var(--color-gold); } .trust-icon svg { width: 22px; height: 22px; } .trust-text strong { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--color-navy); margin-bottom: 4px; } .trust-text span { font-size: 13px; color: var(--color-text-secondary); line-height: 1.4; } /* ———————————————————————————————————————————— SCREEN READER & SKIP LINK ———————————————————————————————————————————— */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: -100%; left: var(--space-md); z-index: var(--z-skip-link); padding: var(--space-sm) var(--space-md); background: var(--color-navy); color: var(--color-white); font-size: 14px; font-weight: 600; border-radius: var(--radius-sm); } .skip-link:focus { top: var(--space-md); } /* ———————————————————————————————————————————— NOSCRIPT WARNING ———————————————————————————————————————————— */ .noscript-warning { background: var(--color-warning-light); border-bottom: 2px solid var(--color-warning); padding: var(--space-md) var(--space-lg); text-align: center; font-size: 14px; color: var(--color-ink); } .noscript-warning a { color: var(--color-navy); text-decoration: underline; } /* ———————————————————————————————————————————— HONEYPOT ———————————————————————————————————————————— */ .honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; } /* ———————————————————————————————————————————— HIDDEN ELEMENTS ———————————————————————————————————————————— */ .brand-mark, .logo-icon { display: none; } .sprite-sheet { position: absolute; width: 0; height: 0; overflow: hidden; } /* ———————————————————————————————————————————— FOUC PREVENTION — Interactive UI Pre-Hide Scoped under .js to preserve no-JS fallback. Main.css overrides with full interactive styling. LAYER 1: Structural hide states LAYER 2: SVG color preload LAYER 3: Cookie / toast / overlay pre-hide ———————————————————————————————————————————— */ /* ——— LAYER 1: Structural Pre-Hide ——— */ .js .nav-dropdown-menu { opacity: 0; visibility: hidden; pointer-events: none; position: absolute; z-index: var(--z-dropdown); } .js .contact-hub { opacity: 0; visibility: hidden; pointer-events: none; position: absolute; } .js .mobile-nav { opacity: 0; visibility: hidden; pointer-events: none; position: fixed; inset: 0; z-index: var(--z-mobile-nav); transform: translateY(-100%); } .js .mobile-nav-dropdown-menu { display: none; } .js .floating-contact, .js .whatsapp-btn, .js .floating-cta { opacity: 0; visibility: hidden; pointer-events: none; position: fixed; z-index: var(--z-sticky); } .js .cookie-banner { opacity: 0; visibility: hidden; pointer-events: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-modal); transform: translateY(100%); } .js .cookie-banner__backdrop { opacity: 0; pointer-events: none; } .js .form-success { display: none; } .js .live-region--visible { opacity: 0; visibility: hidden; pointer-events: none; } .js .pulse-ring { opacity: 0; pointer-events: none; } .js .form-error-summary { display: none; } /* ——— LAYER 2: SVG Color Preload ——— */ .hub-icon svg, .contact-pill svg, .beyond-card-icon svg, .feature-icon svg, .trust-icon svg, .beyond-note svg, .form-note svg, .form-privacy-note svg, .check-icon, .reputation-check svg { color: var(--color-gold); } .nav-dropdown-trigger svg, .dropdown-arrow, .mobile-nav-dropdown-trigger svg, .step-icon svg, .b2b-card-icon svg, .contact-option-icon svg { color: var(--color-navy); } .js .floating-contact svg, .js .whatsapp-btn svg, .js .floating-cta svg { color: var(--color-gold); } .cta-card-link svg { color: var(--color-navy); } .footer-link svg, .footer-link-icon, .footer-brand-mark svg { color: currentColor; } /* ——— LAYER 3: Overlay Protection ——— */ .js [data-overlay], .js [data-modal-backdrop] { opacity: 0; visibility: hidden; pointer-events: none; } .form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ———————————————————————————————————————————— RESPONSIVE — 1024px (Critical scope) ———————————————————————————————————————————— */ @media (max-width: 1024px) { .morph-header.pill-mode { width: min(750px, calc(100% - 32px)); } .logo-nav { height: 52px; } .hero-visual { min-height: 500px; } .trust-grid { grid-template-columns: repeat(2, 1fr); } } /* ———————————————————————————————————————————— RESPONSIVE — 768px (Critical scope) ———————————————————————————————————————————— */ @media (max-width: 768px) { :root { --header-height: var(--header-height-mobile); } .morph-header.pill-mode { width: 100%; top: 0; left: 0; transform: none; border-radius: 0; border: none; border-bottom: 1px solid var(--glass-border); height: var(--header-height-mobile); padding: 0 var(--space-md); } .morph-header.pill-mode .header-inner { justify-content: flex-start; } .morph-header.pill-mode .brand-wrapper { margin: 0; margin-right: auto; position: relative; width: auto; flex: 0 0 auto; } .morph-header.pill-mode .logo-nav { height: 46px; width: auto; margin: 0; max-width: none; transform-origin: left center; } .nav-links, .nav-cta-btn, .nav-dropdown { display: none; } .menu-toggle { display: flex; margin-left: auto; } .morph-header.dot-mode .menu-toggle { display: none; } .morph-header.dot-mode .logo-nav { width: var(--dot-mode-logo-size); height: var(--dot-mode-logo-size); max-width: var(--dot-mode-logo-size); max-height: var(--dot-mode-logo-size); } .header-spacer { height: 92px; } .hero-visual { min-height: 450px; } .hero-content { padding: var(--space-2xl) 0; } .hero--subpage .hero-visual { min-height: 260px; } .hero--subpage .hero-content { padding: var(--space-xl) 0; } .trust-grid { grid-template-columns: 1fr; } /* Scroll-restored dot mode — mobile position */ .js.scrolled .morph-header { top: 16px; right: 16px; width: var(--dot-mode-size-mobile); height: var(--dot-mode-size-mobile); } } /* ———————————————————————————————————————————— RESPONSIVE — 480px (Critical scope) ———————————————————————————————————————————— */ @media (max-width: 480px) { :root { --space-xl: 24px; --space-2xl: 40px; --space-3xl: 64px; } .section { padding: var(--space-2xl) 0; } .hero-visual { min-height: 400px; border-radius: 0; } .hero-title { font-size: 2rem; } .hero-actions { flex-direction: column; } .hero-actions .btn { width: 100%; justify-content: center; } .morph-header.pill-mode .logo-nav { height: 42px; } .morph-header.dot-mode { top: 16px; right: 16px; width: var(--dot-mode-size-mobile); height: var(--dot-mode-size-mobile); } .morph-header.dot-mode .logo-nav { width: var(--dot-mode-logo-size-mobile); height: var(--dot-mode-logo-size-mobile); max-width: var(--dot-mode-logo-size-mobile); max-height: var(--dot-mode-logo-size-mobile); } .ring-container, .pulse-ring { width: var(--ring-size-mobile); height: var(--ring-size-mobile); } } /* ———————————————————————————————————————————— REDUCED MOTION — Critical scope ———————————————————————————————————————————— */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .cookie-banner.is-visible { pointer-events: auto; }