:root { --teal: #17c3d6; --teal-dark: #0ea7ba; --navy: #16262f; --navy-soft: #3a4b53; --grey: #64767e; --bg-hero-top: rgba(243, 251, 252, 0.4); --bg-hero-bot: rgba(227, 245, 248, 0.5); --card-bg: #f6fcfd; --card-border: #dcf0f3; --bg-page: #ffffff; --bg-header: rgba(255, 255, 255, 0.9); --border-soft: rgba(0, 0, 0, 0.06); --step-desc: #94a3aa; --btn-outline-bg: #ffffff; --max-width: 1600px; --font-head: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; } /* Dark theme - toggled by adding data-theme="dark" to (see the inline head script + js/site.js). Almost everything on the site already flows through these tokens, so redefining them here is most of the work; the few hardcoded colors (header bg, borders, etc.) were converted to tokens above specifically so this block could cover them. */ :root[data-theme="dark"] { --navy: #eef5f7; --navy-soft: #c3d2d7; --grey: #93a7ae; --bg-page: #0b161c; --bg-header: rgba(11, 22, 28, 0.85); --border-soft: rgba(255, 255, 255, 0.08); --bg-hero-top: rgba(6, 14, 19, 0.6); --bg-hero-bot: rgba(6, 14, 19, 0.78); --card-bg: #10222a; --card-border: rgba(255, 255, 255, 0.08); --step-desc: #7f9298; --btn-outline-bg: rgba(255, 255, 255, 0.04); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); color: var(--navy); background: var(--bg-page); -webkit-font-smoothing: antialiased; transition: background-color 0.2s ease, color 0.2s ease; } img, svg { display: block; max-width: 100%; } a { text-decoration: none; color: inherit; } .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } /* Header */ .site-header { position: sticky; top: 0; background: var(--bg-header); backdrop-filter: blur(6px); z-index: 50; border-bottom: 1px solid var(--border-soft); transition: background-color 0.2s ease, border-color 0.2s ease; } .header-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; height: 76px; } .logo { display: flex; align-items: center; gap: 10px; color: var(--navy); } /* The source PNG is a solid-white silhouette on a transparent background (see reference/FNMN_Logo.PNG), so it's used as a mask rather than an - that lets it pick up an actual brand color instead of disappearing against the header's near-white background. */ .logo-mark-img { display: inline-block; width: 92px; height: 19px; /* Matches the reference mockup exactly - the mark is a light grey outline, not solid navy (same tone as the "Prints" caption next to it), not the near-black it was rendering as before (2026-09-27). */ background-color: var(--grey); -webkit-mask: url('../assets/images/logo-mark.png') center / contain no-repeat; mask: url('../assets/images/logo-mark.png') center / contain no-repeat; } .logo-caption { font-family: var(--font-head); font-weight: 500; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--grey); } /* Plain nav on the header's own white/near-white background (no pill container), adapted from a user-supplied reference - link text is the same grey as the logo, icons are the site's blue/teal, replacing the earlier dark/grey capsule version entirely (2026-09-28). */ .main-nav { display: flex; justify-content: center; align-items: center; gap: 32px; margin: 0 auto; } .main-nav a { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); transition: color 0.2s ease; } .main-nav a svg { width: 16px; height: 16px; flex: none; color: var(--teal); transition: color 0.2s ease; } .main-nav a:hover { color: var(--teal-dark); } .main-nav a:hover svg { color: var(--teal-dark); } .main-nav a[aria-current="page"], .main-nav a[aria-current="page"] svg, .mobile-nav a[aria-current="page"] { color: var(--teal-dark); } .header-right { display: flex; align-items: center; gap: 14px; } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; } .nav-toggle span { width: 22px; height: 2px; background: var(--navy); } .mobile-nav { display: none; flex-direction: column; padding: 8px 24px 20px; font-family: var(--font-head); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; } .mobile-nav a { padding: 12px 0; border-top: 1px solid var(--border-soft); } .mobile-nav.open { display: flex; } /* Dark/light toggle - a track with two static dim icons at each end, plus a glowing thumb that slides between them and shows a bright copy of whichever one is currently active. */ .theme-toggle { position: relative; background: none; border: none; padding: 0; cursor: pointer; line-height: 0; } .theme-toggle-track { position: relative; display: flex; align-items: center; justify-content: space-between; width: 56px; height: 28px; border-radius: 999px; padding: 0 6px; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); transition: background-color 0.2s ease, border-color 0.2s ease; } .theme-icon-static { width: 13px; height: 13px; color: var(--grey); opacity: 0.6; } .theme-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; background: linear-gradient(160deg, #5ce1ec 0%, var(--teal-dark) 100%); box-shadow: 0 2px 6px rgba(14, 167, 186, 0.5), 0 0 12px rgba(23, 195, 214, 0.55); transition: left 0.25s ease; } .theme-toggle-thumb .theme-icon { width: 13px; height: 13px; } .theme-icon-moon { display: none; } [data-theme="dark"] .theme-toggle-thumb { left: calc(100% - 25px); } [data-theme="dark"] .theme-toggle-thumb .theme-icon-sun { display: none; } [data-theme="dark"] .theme-toggle-thumb .theme-icon-moon { display: block; } /* Hero */ .hero { background: linear-gradient(180deg, var(--bg-hero-top) 0%, var(--bg-hero-bot) 100%), url('../assets/images/hero-background.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; padding: 28px 0 56px; } .hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 32px; } .hero h1 { margin: 0 0 28px; font-family: var(--font-head); line-height: 1.12; } .line-light { display: block; font-weight: 300; font-size: clamp(44px, 6.4vw, 80px); color: var(--navy); /* Reference mockup renders the whole headline in caps, not title case (2026-09-27). */ text-transform: uppercase; } .line-bold { display: block; font-weight: 700; font-size: clamp(44px, 7vw, 88px); color: var(--navy); text-transform: uppercase; } .accent { color: var(--teal); } .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; } .btn { display: inline-flex; align-items: center; gap: 14px; padding: 19px 30px; border-radius: 999px; font-family: var(--font-head); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn:hover { transform: translateY(-1px); } /* Flat pill style, per the user's reference screenshot: a simple diagonal gradient fill, a small tight drop shadow (not a diffuse outward halo), and no glossy inset highlights. */ .btn-solid { position: relative; z-index: 1; overflow: hidden; background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%); color: #ffffff; border: none; box-shadow: 0 6px 14px rgba(14, 167, 186, 0.35); transition: color 0.4s ease, box-shadow 0.15s ease; } .btn-solid:hover { color: var(--teal-dark); box-shadow: 0 8px 18px rgba(14, 167, 186, 0.42); } .btn-outline { position: relative; z-index: 1; overflow: hidden; background: var(--btn-outline-bg); color: var(--teal-dark); border: 1.5px solid var(--teal); box-shadow: 0 4px 10px rgba(23, 195, 214, 0.14); transition: color 0.4s ease, box-shadow 0.15s ease; } .btn-outline:hover { color: #ffffff; box-shadow: 0 6px 14px rgba(23, 195, 214, 0.2); } .btn-solid:active, .btn-outline:active { transform: scale(0.97); } /* Swipe/reveal hover effect (adapted from a user-supplied component): a circle sitting off-screen to the left slides in and scales up on hover, flooding the pill with a new color - replaces the earlier glow-blob attempts entirely (2026-09-28). Each button keeps its resting identity (solid stays blue, outline stays white) and reveals the OPPOSITE color on hover, so the pair mirrors each other: blue->white and white->blue. */ .btn-fill { position: absolute; top: 50%; left: -155%; z-index: 0; width: 140%; aspect-ratio: 1 / 1; border-radius: 999px; transform: translateY(-50%) scale(0.6); transition: left 0.6s ease, transform 0.6s ease; pointer-events: none; } .btn-solid .btn-fill { background: #ffffff; } .btn-outline .btn-fill { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%); } .btn:hover .btn-fill { left: 0%; transform: translateY(-50%) scale(1.3); } .btn-solid .btn-label, .btn-solid .arrow, .btn-outline .btn-label, .btn-outline .arrow { position: relative; z-index: 1; transition: color 0.4s ease, background 0.4s ease; } .arrow { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; /* Sits at a diagonal at rest and straightens to point forward on hover - adapted from a user-supplied component whose arrow rotated 45deg->90deg on hover (2026-09-28). Our arrow glyph already points right at rest (unlike their vertical SVG), so the equivalent motion is diagonal-> forward rather than their literal degree values. */ transform: rotate(-45deg); transition: transform 0.3s ease; } .btn:hover .arrow { transform: rotate(0deg); } .arrow svg { width: 100%; height: 100%; } /* Swapped the text-arrow-on-a-filled-chip for a bold circle+arrow icon (user-supplied reference image) using stroke="currentColor" - it inherits the button's own text color instead of the old separate chip background/glyph colors, so it's automatically the "same colors we have now" in every state (2026-09-28). This isn't just simpler: the old chip colors didn't track hover state for the outline button's glyph (it stayed teal-dark even once the button hover-floods teal), which would have made a strokes-only icon invisible there without this change. */ .hero-art { width: 100%; } .hero-3d { position: relative; width: 100%; aspect-ratio: 420 / 460; min-height: 280px; cursor: grab; } .hero-3d:active { cursor: grabbing; } .hero-3d canvas { width: 100% !important; height: 100% !important; display: block; } /* Technical annotation overlay - dashed targeting rings + dimension callouts, sitting on top of the live 3D canvas but never intercepting its drag-to-orbit interaction. Restores the schematic/measurement look from the original mockup, now driven by the real STL's measured size instead of guessed numbers (see hero-viewer.js). */ .hero-3d-annotations { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* Hidden (2026-09-28) - the overlay is absolutely positioned, so it stacks above the 3D canvas regardless of DOM order, and the rings were showing through on top of the object once it was scaled up (v2 pass). True per-pixel occlusion against a rotating 3D shape isn't practical with a flat 2D SVG overlay, so hidden entirely rather than half-fixed. Markup/JS left intact in case a real depth-aware version is worth building later. */ .ann-ring { display: none; } /* Hidden for now per user request (2026-09-27) - keep the markup/JS wiring intact (see hero-viewer.js setOverlayDimensions) so turning the dimension callouts back on later is just deleting this rule. */ .ann-leader { display: none; } .ann-leader line { stroke: var(--navy-soft); stroke-width: 1; opacity: 0.6; } .ann-leader text { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.03em; fill: var(--navy-soft); opacity: 0.75; } .hero-3d-caption { margin: 10px 0 0; text-align: center; font-size: 12px; letter-spacing: 0.04em; color: var(--grey); } /* Process */ .process { padding: 56px 0 90px; } .process-label { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; } .process-label span { font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-dark); white-space: nowrap; } .process-label i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--teal) 0%, rgba(23,195,214,0) 100%); } .process-grid { display: flex; align-items: stretch; gap: 0; } .process-grid .step { flex: 1 1 0; min-width: 0; } .step { position: relative; overflow: visible; display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 22px 20px 24px; } /* Large decorative illustration, contained fully inside the card (moved left/shrunk off the bleeding-past-the-edge version per user request, 2026-09-28). */ .step-icon-big { position: absolute; top: 6%; right: 8%; width: 36%; max-width: 102px; height: auto; object-fit: contain; opacity: 1; pointer-events: none; z-index: 1; } .step-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; margin-bottom: 14px; } .step-num { font-family: var(--font-head); font-weight: 700; font-size: 32px; line-height: 1; color: var(--teal-dark); } /* Small line-icon next to each step number - present in the reference mockup (a thin outline pin/monitor/gear/layers glyph per step) alongside the big bleeding illustration; re-added to match it exactly (2026-09-27). */ .step-icon-small { width: 26px; height: 26px; color: var(--teal-dark); flex: none; } .step h3 { position: relative; z-index: 2; /* Shrink to the width of its own text (the widest of the two wrapped lines) instead of stretching full-width like a flex column's default - so the gradient rule underneath hugs the text, not the whole card (2026-09-28, per reference: a hand-drawn mark showing the divider should end near where the heading text ends, not extend across the card). */ align-self: flex-start; margin: 0 0 8px; font-family: var(--font-head); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding-bottom: 10px; /* Solid teal-dark (matches the number/pin-icon color) fading to transparent left-to-right, instead of the old flat grey border. */ background-image: linear-gradient(to right, var(--teal-dark), transparent); background-repeat: no-repeat; background-position: left bottom; background-size: 100% 1px; } .step p { position: relative; z-index: 2; margin: auto 0; font-size: 11px; line-height: 1.6; letter-spacing: 0.03em; text-transform: uppercase; color: var(--step-desc); } .step-chevron { display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--teal); padding: 0 6px; } /* Interior-page header, used by projects/services/about/contact until each gets its own real content (2026-09-28). Reuses the homepage hero's gradient tokens for visual consistency without the photo/3D model. */ .page-hero { padding: 72px 0 56px; background: linear-gradient(180deg, var(--bg-hero-top) 0%, var(--bg-hero-bot) 100%); } .page-hero h1 { margin: 0 0 12px; font-family: var(--font-head); font-size: clamp(36px, 5vw, 56px); font-weight: 700; color: var(--navy); text-transform: uppercase; } .page-hero p { margin: 0; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--grey); } /* Products page (2026-09-29) - reuses the site's existing card/icon/button language rather than introducing a new visual system. No product photos yet, so the visual slot is a deliberate technical "blueprint" panel (grid + dashed target rings + a line-art icon) instead of an empty/broken image placeholder - it reads as intentional, not unfinished. */ .products { padding: 48px 0 88px; } .product { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; } .product + .product { margin-top: 72px; padding-top: 72px; border-top: 1px solid var(--border-soft); } .product--reverse .product-visual { order: 2; } .product-visual { position: relative; aspect-ratio: 1 / 1; border-radius: 20px; background: linear-gradient(160deg, var(--bg-hero-top) 0%, var(--bg-hero-bot) 100%), var(--card-bg); border: 1px solid var(--card-border); overflow: hidden; display: flex; align-items: center; justify-content: center; } /* Real product photo (Blender renders, 2026-09-29) - fills the same panel used for the no-photo-yet blueprint placeholder below, so future products without a render yet can still use that treatment. */ .product-visual img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; } .product-visual::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--card-border) 1px, transparent 1px), linear-gradient(90deg, var(--card-border) 1px, transparent 1px); background-size: 32px 32px; opacity: 0.6; } .product-visual-ring { position: absolute; border-radius: 50%; border: 1px dashed var(--teal-dark); opacity: 0.3; } .product-visual .ring-outer { width: 74%; height: 74%; opacity: 0.18; } .product-visual .ring-inner { width: 52%; height: 52%; } .product-icon { position: relative; z-index: 1; width: 30%; height: 30%; color: var(--teal-dark); } .product-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .product-index { font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; color: var(--teal-dark); } .product-status { font-family: var(--font-head); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-dark); background: rgba(23, 195, 214, 0.12); padding: 5px 12px; border-radius: 999px; } .product-status--dev { color: var(--grey); background: var(--border-soft); } .product-info h2 { font-family: var(--font-head); font-size: clamp(26px, 3vw, 36px); font-weight: 700; text-transform: uppercase; color: var(--navy); margin: 0 0 10px; } .product-tagline { font-family: var(--font-head); font-size: 15px; font-weight: 600; color: var(--teal-dark); margin: 0 0 16px; } .product-desc { font-size: 15px; line-height: 1.7; color: var(--grey); max-width: 52ch; margin: 0 0 28px; } .product-specs { list-style: none; margin: 0 0 32px; padding: 20px 0 0; border-top: 1px solid var(--border-soft); display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 24px; } .product-specs li { display: flex; align-items: flex-start; gap: 12px; } .product-specs svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--teal); } .spec-label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--step-desc); margin-bottom: 3px; } .spec-value { display: block; font-size: 14px; font-weight: 500; color: var(--navy); line-height: 1.4; } .product-actions { display: flex; flex-wrap: wrap; gap: 16px; } .products-cta { padding: 72px 0 96px; text-align: center; background: linear-gradient(180deg, var(--bg-hero-top) 0%, var(--bg-hero-bot) 100%); } .products-cta h2 { font-family: var(--font-head); font-size: clamp(26px, 3vw, 34px); font-weight: 700; text-transform: uppercase; color: var(--navy); margin: 0 0 12px; } .products-cta p { font-size: 15px; line-height: 1.6; color: var(--grey); max-width: 460px; margin: 0 auto 28px; } .products-cta .btn { display: inline-flex; } /* About page (2026-09-29) - reuses the same card/icon/button language as the Products page. No founder photos yet, so avatars use the same "blueprint" panel treatment as the no-photo product visual, with an initial instead of a product icon. */ .story { padding: 64px 0 24px; } .story .wrap { max-width: 760px; } .story h2 { font-family: var(--font-head); font-size: clamp(24px, 3vw, 32px); font-weight: 700; text-transform: uppercase; color: var(--navy); margin: 0 0 18px; } .story p { font-size: 15px; line-height: 1.75; color: var(--grey); margin: 0 0 18px; } .story p:last-child { margin-bottom: 0; } .founders { padding: 24px 0 88px; } .founders-intro { max-width: 640px; margin: 0 0 40px; } .founders-intro h2 { font-family: var(--font-head); font-size: clamp(24px, 3vw, 32px); font-weight: 700; text-transform: uppercase; color: var(--navy); margin: 0 0 10px; } .founders-intro p { font-size: 15px; line-height: 1.6; color: var(--grey); margin: 0; } .founder-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .founder-card { display: flex; gap: 24px; align-items: flex-start; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 32px; } .founder-avatar { position: relative; flex: none; width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(160deg, var(--bg-hero-top) 0%, var(--bg-hero-bot) 100%), var(--card-bg); border: 1px solid var(--card-border); overflow: hidden; display: flex; align-items: center; justify-content: center; } .founder-avatar::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--card-border) 1px, transparent 1px), linear-gradient(90deg, var(--card-border) 1px, transparent 1px); background-size: 16px 16px; opacity: 0.6; } .founder-avatar-ring { position: absolute; width: 78%; height: 78%; border-radius: 50%; border: 1px dashed var(--teal-dark); opacity: 0.3; } .founder-initial { position: relative; z-index: 1; font-family: var(--font-head); font-weight: 700; font-size: 34px; color: var(--teal-dark); } .founder-body h3 { font-family: var(--font-head); font-size: 20px; font-weight: 700; text-transform: uppercase; color: var(--navy); margin: 0 0 2px; } .founder-role { display: block; font-family: var(--font-head); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); margin: 0 0 12px; } .founder-bio { font-size: 14px; line-height: 1.65; color: var(--grey); margin: 0; } .values { padding: 24px 0 88px; } .value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .value-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 28px 24px; } .value-icon { width: 34px; height: 34px; color: var(--teal); margin-bottom: 16px; } .value-card h3 { font-family: var(--font-head); font-size: 16px; font-weight: 700; text-transform: uppercase; color: var(--navy); margin: 0 0 8px; } .value-card p { font-size: 13.5px; line-height: 1.6; color: var(--grey); margin: 0; } /* Contact page (2026-09-29) - reuses the same card language as Products/ About. The form has no backend yet (no External Service chosen - see PROJECT.md), so submit is handled client-side: it shows a success message in place of actually sending anywhere. */ .contact { padding: 64px 0 96px; } .contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; } .contact-form-card, .contact-info-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 36px; } .contact-form-card h2, .contact-info-card h2 { font-family: var(--font-head); font-size: 20px; font-weight: 700; text-transform: uppercase; color: var(--navy); margin: 0 0 22px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; } .form-field label { font-family: var(--font-head); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--step-desc); } .field-optional { text-transform: none; font-family: var(--font-body); font-weight: 400; letter-spacing: normal; color: var(--grey); } .form-field input, .form-field select, .form-field textarea { font: 15px/1.5 var(--font-body); color: var(--navy); background: var(--bg-page); border: 1px solid var(--card-border); border-radius: 10px; padding: 12px 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .form-field textarea { resize: vertical; min-height: 130px; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(23, 195, 214, 0.15); } .contact-form-card .btn { margin-top: 4px; } .form-success { display: none; margin: 18px 0 0; padding: 14px 16px; border-radius: 10px; background: rgba(23, 195, 214, 0.12); color: var(--teal-dark); font-size: 14px; font-weight: 500; } .form-success.visible { display: block; } .form-success.error { background: rgba(220, 68, 68, 0.12); color: #c53030; } .contact-info { display: flex; flex-direction: column; gap: 24px; } .contact-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; } .contact-steps li { display: flex; align-items: flex-start; gap: 12px; } .contact-steps svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--teal); } .contact-steps span { font-size: 14px; line-height: 1.55; color: var(--grey); } .contact-info-note { font-size: 14px; line-height: 1.6; color: var(--grey); margin: 0; } /* Footer */ .site-footer { padding: 24px 0; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--grey); } /* Responsive */ @media (max-width: 980px) { .process-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .step-chevron { display: none; } .value-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .main-nav { display: none; } .nav-toggle { display: flex; } .hero-inner { grid-template-columns: 1fr; } .hero-art { order: -1; max-width: 280px; margin: 0 auto 12px; } .product { grid-template-columns: 1fr; gap: 28px; } .product--reverse .product-visual { order: -1; } .product-visual { max-width: 320px; margin: 0 auto; } .founder-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } .hero-actions { flex-direction: column; align-items: flex-start; } .product-specs { grid-template-columns: 1fr; } .value-grid { grid-template-columns: 1fr; } .founder-card { flex-direction: column; align-items: flex-start; } .form-row { grid-template-columns: 1fr; } .contact-form-card, .contact-info-card { padding: 26px; } }