/* ╔══════════════════════════════════════════════════════════╗ ║ LUMIOTO — SHARED STYLES (all pages) ║ ║ Change colors, font, and brand below ║ ╚══════════════════════════════════════════════════════════╝ FONT ---- Current: Inter Change the Google Fonts URL in each page AND the font-family below COLORS ------ Primary (brand green): #3D5A00 → buttons, accents, stat cards, links Primary light: #6B9A1E → brighter green for highlights CTA / Buttons: #3D5A00 → same as primary (change to separate if needed) Background: #ffffff → main page background Sections (alternating): #f0f4e8 → light green tint on alternating sections Cards: #f7f7f8 → service cards, form inputs, testimonial cards Borders: #e8e8ed → dividers, input borders Text (headings): #1d1d1f → headlines, titles Text (body): #6e6e73 → descriptions, paragraphs Text (labels): #86868b → captions, form labels, footer Dark backgrounds: #0a0a0a → 90-days card, deep accents Gradient card (service): #C5D9A8 → bottom of gradient on middle service card ══════════════════════════════════════════════════════════ */ :root { /* ═══ BRAND ═══ */ --primary: #3D5A00; /* Main brand green */ --primary-bright: #6B9A1E; /* Lighter green for highlights */ --primary-light: rgba(61,90,0,.08); /* Subtle green tint */ /* ═══ BACKGROUNDS ═══ */ --bg: #ffffff; /* Page background */ --bg-section: #f7f7f8; /* Cards, inputs, testimonials */ --bg-tint: #f0f4e8; /* Green-tinted section gradient */ --bg-dark: #0a0a0a; /* Dark accents (90 days card) */ --bg-gradient-card: #C5D9A8; /* Bottom of middle service card gradient */ /* ═══ CTA / BUTTONS ═══ */ --cta: #3D5A00; /* Button color (same as primary) */ --cta-nav: #1d1d1f; /* Nav button (Schedule a Call) */ /* ═══ TEXT ═══ */ --text-heading: #1d1d1f; /* Headlines, titles */ --text-body: #6e6e73; /* Descriptions, paragraphs */ --text-label: #86868b; /* Captions, form labels, footer */ /* ═══ BORDERS ═══ */ --border: #e8e8ed; /* Dividers, input borders */ /* ═══ ANIMATION (no need to change) ═══ */ --ease: cubic-bezier(.25,.46,.45,.94); --ease-out: cubic-bezier(.16,1,.3,1); /* Legacy aliases (so existing styles keep working) */ --green: var(--primary); --green-bright: var(--primary-bright); --green-light: var(--primary-light); --white: var(--bg); --gray-100: var(--bg-section); --gray-200: var(--border); --black: var(--text-heading); --black-deep: var(--bg-dark); --gray-400: var(--text-label); --gray-600: var(--text-body); --text: var(--text-heading); } /* ═══ FONT ═══ */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif; color: var(--black); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.5; width: 100%; max-width: 100vw; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } .cursor-glow { position: fixed; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(61,90,0,.04) 0%, transparent 70%); pointer-events: none; z-index: 0; transform: translate(-50%, -50%); opacity: 0; transition: opacity .6s; } .cursor-glow.on { opacity: 1; } nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); background: rgba(255,255,255,.72); border-bottom: 1px solid rgba(0,0,0,.04); transition: transform .4s var(--ease), box-shadow .3s; } nav.hide { transform: translateY(-100%); } .nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 2rem; height: 52px; display: flex; align-items: center; justify-content: space-between; } .logo { font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; color: var(--black); text-decoration: none; } .logo em { color: var(--green); font-style: normal; } .nav-cta { background: var(--black); color: #fff; padding: 8px 20px; border-radius: 980px; font-size: .8125rem; font-weight: 600; text-decoration: none; transition: all .3s var(--ease); white-space: nowrap; } .nav-cta:hover { background: var(--black-deep); transform: scale(1.04); } /* Hero with grain texture + animated gradient */ .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6rem 2rem 6rem; position: relative; overflow: hidden; background: linear-gradient(135deg, #ffffff 0%, #f0f4e8 30%, #ffffff 60%, #f7f7f8 100%); background-size: 300% 300%; animation: heroGradient 12s ease infinite; } .hero::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0; } @keyframes heroGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .hero > * { position: relative; z-index: 1; } .hero-line { position: absolute; width: 1px; height: 35vh; background: linear-gradient(to bottom, transparent, rgba(61,90,0,.1), transparent); animation: lineDrop 3.5s var(--ease-out) infinite; z-index: 0; } .hero-line:nth-child(1) { left: 12%; animation-delay: 0s; } .hero-line:nth-child(2) { left: 50%; animation-delay: 1.2s; } .hero-line:nth-child(3) { left: 88%; animation-delay: 2.4s; } @keyframes lineDrop { 0% { transform: translateY(-100%); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(250%); opacity: 0; } } .hero-eyebrow { font-size: .8125rem; font-weight: 600; color: var(--green); letter-spacing: .08em; text-transform: uppercase; margin-top: .75rem; margin-bottom: 2.5rem; opacity: 0; animation: rise .7s var(--ease-out) .4s forwards; } .hero h1 { font-size: clamp(2.8rem, 7vw, 5.5rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; max-width: 800px; margin-bottom: .75rem; margin-top: -4vh; color: var(--black); opacity: 0; animation: rise .8s var(--ease-out) .15s forwards; } .hero h1 .accent { color: var(--green); display: inline-block; filter: blur(8px); opacity: 0; animation: unblur 2.5s ease .8s forwards; } @keyframes unblur { 0% { filter: blur(8px); opacity: 0; } 100% { filter: blur(0); opacity: 1; } } .hero-ctas { display: flex; gap: 1rem; align-items: center; opacity: 0; animation: rise .8s var(--ease-out) 1.8s forwards; } @keyframes rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } .hi-text { display: inline-block; opacity: 0; animation: rise .7s var(--ease-out) 2.4s forwards; } .btn-primary { background: var(--green); color: #fff; padding: 14px 32px; border-radius: 980px; font-size: 1rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; transition: all .4s var(--ease); position: relative; overflow: hidden; } .btn-primary::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,.15), transparent); opacity: 0; transition: opacity .3s; } .btn-primary:hover::after { opacity: 1; } .btn-primary:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 40px rgba(61,90,0,.25); } .btn-secondary { color: var(--black); padding: 14px 32px; border-radius: 980px; font-size: 1rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all .3s var(--ease); } .btn-secondary:hover { background: var(--gray-100); } .btn-secondary .arrow { transition: transform .3s var(--ease); } .btn-secondary:hover .arrow { transform: translateX(4px); } /* Section heading (consistent) */ .section-header { text-align: center; margin-bottom: 2.5rem; } .section-label { font-size: .8125rem; font-weight: 600; color: var(--green); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .5rem; } .section-title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; letter-spacing: -.03em; color: var(--black); } .section-divider { width: 40px; height: 3px; background: var(--green); border-radius: 2px; margin: 0 auto 3rem; animation: dividerGrow .8s var(--ease-out) forwards; transform-origin: center; } @keyframes dividerGrow { from { width: 0; opacity: 0; } to { width: 40px; opacity: 1; } } /* Floating houses */ .particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .particle { position: absolute; animation: float linear infinite; opacity: 0; } .particle svg { stroke: rgba(61,90,0,.1); stroke-width: 1.5; fill: none; stroke-linejoin: round; stroke-linecap: round; } .particle:nth-child(1) { left: 8%; animation-duration: 14s; animation-delay: 0s; } .particle:nth-child(1) svg { width: 26px; height: 26px; } .particle:nth-child(2) { left: 25%; animation-duration: 18s; animation-delay: 2s; } .particle:nth-child(2) svg { width: 20px; height: 20px; } .particle:nth-child(3) { left: 42%; animation-duration: 16s; animation-delay: 5s; } .particle:nth-child(3) svg { width: 30px; height: 30px; } .particle:nth-child(4) { left: 62%; animation-duration: 13s; animation-delay: 1s; } .particle:nth-child(4) svg { width: 18px; height: 18px; } .particle:nth-child(5) { left: 78%; animation-duration: 17s; animation-delay: 3s; } .particle:nth-child(5) svg { width: 24px; height: 24px; } .particle:nth-child(6) { left: 92%; animation-duration: 15s; animation-delay: 6s; } .particle:nth-child(6) svg { width: 16px; height: 16px; } @keyframes float { 0% { transform: translateY(60vh) rotate(0deg); opacity: 0; } 5% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(-15vh) rotate(12deg); opacity: 0; } } /* Stats */ .stats-strip { padding: 4.5rem 1.5rem; background: #ffffff; color: var(--black); position: relative; overflow: hidden; max-width: 100%; } .stats-strip::before { content: ''; position: absolute; top: -40%; left: -40%; width: 180%; height: 180%; background: radial-gradient(ellipse at center, rgba(61,90,0,.04) 0%, transparent 55%); animation: pulse 6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: .4; } 50% { transform: scale(1.15); opacity: .9; } } .stats-inner { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; position: relative; z-index: 1; } .stat-card { background: var(--green); border: none; border-radius: 20px; padding: 2rem 1.75rem; display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden; transition: all .5s var(--ease), box-shadow .3s; } .stat-card::before { content: ''; position: absolute; inset: 0; border-radius: 20px; background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 60%); pointer-events: none; } .stat-card:hover { box-shadow: 0 12px 40px rgba(61,90,0,.25); transform: translateY(-3px); } .stat-content { display: flex; flex-direction: column; } .stat-number { font-size: clamp(2.8rem, 7vw, 3.8rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } .stat-label { font-size: .75rem; color: rgba(255,255,255,.55); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-top: .4rem; } .stat-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .4s var(--ease); } .stat-card:nth-child(2) { background: linear-gradient(180deg, #3D5A00 0%, #1a2600 100%); } .stat-card:nth-child(3) { background: var(--black-deep); } .stat-card:nth-child(3) .stat-number { color: #fff; } .stat-card:nth-child(3) .stat-label { color: rgba(255,255,255,.45); } .stat-card:nth-child(3) .stat-icon { background: rgba(255,255,255,.08); } .stat-card:nth-child(3) .stat-icon svg { stroke: rgba(255,255,255,.6); } .stat-card:hover .stat-icon { transform: scale(1.08) rotate(-4deg); } .stat-icon svg { width: 22px; height: 22px; stroke: rgba(255,255,255,.65); stroke-width: 1.8; fill: none; } /* Journey - Clean vertical timeline */ .how-it-works { padding: 3rem 2rem 2rem; background: #ffffff; } .journey-map { max-width: 600px; margin: 0 auto; position: relative; padding: 0; } .journey-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--border); transform: translateX(-50%); z-index: 0; } .journey-line-fill { position: absolute; left: 50%; top: 0; width: 2px; height: 0; background: var(--primary); transform: translateX(-50%); z-index: 1; opacity: .35; transition: height .05s linear; border-radius: 0 0 2px 2px; } .inspector { position: absolute; z-index: 4; width: 16px; height: 16px; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity .5s, top .1s linear; pointer-events: none; } .inspector-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px rgba(61,90,0,.35), 0 0 20px rgba(61,90,0,.1); position: relative; } .inspector-dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(61,90,0,.12); animation: dotPulse 2.5s ease-in-out infinite; } @keyframes dotPulse { 0%, 100% { transform: scale(1); opacity: .4; } 50% { transform: scale(1.5); opacity: 0; } } .journey-stop { position: relative; display: flex; align-items: flex-start; padding: 1.5rem 0; z-index: 2; } .journey-stop:last-child { padding-bottom: 0; } .journey-stop:nth-child(odd) { justify-content: flex-end; padding-right: calc(50% + 32px); } .journey-stop:nth-child(even) { justify-content: flex-start; padding-left: calc(50% + 32px); } .journey-node { position: absolute; left: 50%; top: 2.5rem; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; transform: translateX(-50%); z-index: 3; transition: all .4s var(--ease-out); } .journey-node span { font-size: .8rem; font-weight: 700; color: var(--text-label); transition: color .4s; } .journey-stop.active .journey-node { background: var(--primary); border-color: var(--primary); box-shadow: 0 4px 16px rgba(61,90,0,.2); } .journey-stop.active .journey-node span { color: #fff; } .journey-card { background: rgba(255,255,255,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 14px; padding: 1.5rem; border: 1px solid rgba(255,255,255,.4); border-left: 3px solid rgba(61,90,0,.1); max-width: 280px; opacity: .35; transform: translateY(4px); transition: all .4s var(--ease-out); } .journey-stop:nth-child(even) .journey-card { border-left: 1px solid rgba(255,255,255,.4); border-right: 3px solid rgba(61,90,0,.1); } .journey-stop.active .journey-card { opacity: 1; transform: translateY(0); background: rgba(255,255,255,.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-left: 3px solid var(--primary); box-shadow: 0 8px 32px rgba(0,0,0,.05); } .journey-stop:nth-child(even).active .journey-card { border-left: 1px solid rgba(255,255,255,.5); border-right: 3px solid var(--primary); } .journey-card .journey-step-label { font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .35rem; color: var(--primary); } .journey-card .journey-title { font-size: 1.25rem; font-weight: 700; color: var(--text); letter-spacing: -.03em; margin-bottom: .4rem; line-height: 1.2; } .journey-card .journey-desc { font-size: .9rem; color: var(--text-body); line-height: 1.6; } .journey-highlight { background: rgba(61,90,0,.06); padding: 1px 6px; border-radius: 3px; font-weight: 600; color: var(--primary); } @media (max-width: 600px) { .journey-stop:nth-child(odd), .journey-stop:nth-child(even) { padding-left: 52px; padding-right: 0; justify-content: flex-start; } .journey-line, .journey-line-fill { left: 18px; } .journey-node { left: 18px; } .inspector { left: 18px; } .journey-card { max-width: 100%; } .journey-stop:nth-child(even) .journey-card { border-right: 1px solid rgba(255,255,255,.4); border-left: 3px solid rgba(61,90,0,.1); } .journey-stop:nth-child(even).active .journey-card { border-right: 1px solid rgba(255,255,255,.5); border-left: 3px solid var(--primary); } } /* Stat card shimmer on hover */ .stat-card::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%); transform: translateX(-100%); transition: none; pointer-events: none; } .stat-card:hover::after { animation: shimmer 1s ease forwards; } @keyframes shimmer { to { transform: translateX(100%); } } /* Scroll animations */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } .reveal.show { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } .reveal-left.show { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } .reveal-right.show { opacity: 1; transform: translateX(0); } .stagger-parent > * { opacity: 0; transform: translateY(24px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); } .stagger-parent.show > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; } .stagger-parent.show > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .08s; } .stagger-parent.show > *:nth-child(3) { opacity: 1; transform: none; transition-delay: .16s; } .stagger-parent.show > *:nth-child(4) { opacity: 1; transform: none; transition-delay: .24s; } .stagger-parent.show > *:nth-child(5) { opacity: 1; transform: none; transition-delay: .32s; } .stagger-parent.show > *:nth-child(6) { opacity: 1; transform: none; transition-delay: .40s; } .stagger-parent.show > *:nth-child(n+7) { opacity: 1; transform: none; transition-delay: .48s; } /* Services */ .services { padding: 5rem 2rem 2rem; background: #ffffff; } .service-cards { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; perspective: 1000px; align-items: stretch; } .service-card { background: var(--gray-100); border-radius: 24px; padding: 2.5rem 2rem; border: 1.5px solid var(--green); transition: all .5s var(--ease); position: relative; overflow: hidden; display: flex; flex-direction: column; transform-style: preserve-3d; } .service-card::before { content: ''; position: absolute; inset: 0; border-radius: 24px; background: linear-gradient(135deg, rgba(255,255,255,.7) 0%, transparent 50%); opacity: 0; transition: opacity .5s; pointer-events: none; } .service-card:hover::before { opacity: 1; } .service-card:hover { box-shadow: 0 25px 70px rgba(0,0,0,.07); transform: translateY(-4px); } .service-card:nth-child(2) { background: linear-gradient(180deg, #f7f7f8 0%, #C5D9A8 100%); border-color: var(--green); } .service-card:nth-child(2) .service-card-title { color: var(--black); } .service-card:nth-child(2) .service-card-desc { color: var(--gray-600); } .service-card:nth-child(2) .service-card-label { color: var(--gray-400); } .service-card:nth-child(2) .feature-item { color: var(--gray-600); border-color: var(--gray-200); } .service-card:nth-child(2) .feature-check { background: var(--green-light); color: var(--green); } .service-card:nth-child(2) .service-card-icon { background: var(--green-light); } .service-card:nth-child(2) .service-card-icon svg { stroke: var(--green); } .service-card.featured { background: var(--green); color: #fff; border-color: transparent; } .service-card.featured::before { background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 50%); } .service-card.featured .service-card-label { color: rgba(255,255,255,.5); } .service-card.featured .service-card-title { color: #fff; } .service-card.featured .service-card-desc { color: rgba(255,255,255,.65); } .service-card.featured .feature-item { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.12); } .service-card.featured .feature-check { background: rgba(255,255,255,.15); color: #fff; } .service-card.featured .service-card-icon { background: rgba(255,255,255,.12); } .service-card.featured .service-card-icon svg { stroke: #fff; } .service-card-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; background: var(--green-light); transition: transform .4s var(--ease); } .service-card:hover .service-card-icon { transform: scale(1.08) rotate(-3deg); } .service-card-icon svg { width: 22px; height: 22px; stroke: var(--green); stroke-width: 1.8; fill: none; } .service-card-label { font-size: .75rem; font-weight: 600; color: var(--gray-400); letter-spacing: .05em; text-transform: uppercase; margin-bottom: .5rem; } .service-card-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: .75rem; line-height: 1.2; color: var(--black); } .service-card-desc { font-size: .9rem; color: var(--gray-600); line-height: 1.6; margin-bottom: 1.5rem; } .feature-list { list-style: none; display: flex; flex-direction: column; } .feature-item { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; font-size: .875rem; color: var(--gray-600); line-height: 1.5; border-top: 1px solid var(--gray-200); } .feature-check { width: 20px; height: 20px; border-radius: 6px; background: var(--green-light); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .feature-check svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.5; fill: none; } .service-card-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 1.5rem; font-size: .875rem; font-weight: 600; color: var(--green); text-decoration: none; transition: all .3s var(--ease); } .service-card-cta:hover { gap: 10px; } .service-card.featured .service-card-cta { color: #fff; } /* Testimonials */ .testimonials { padding: 4rem 2rem; background: #ffffff; } .testimonials-inner { max-width: 1100px; margin: 0 auto; } .testimonials-track-wrap { overflow: hidden; position: relative; } .testimonials-track { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: .5rem; } .testimonials-track::-webkit-scrollbar { display: none; } .testimonial-card { background: var(--gray-100); border-radius: 20px; padding: 2rem; min-width: 320px; max-width: 320px; flex-shrink: 0; scroll-snap-align: start; transition: all .4s var(--ease); position: relative; } .testimonial-card::before { content: '\201C'; position: absolute; top: 16px; right: 20px; font-size: 3rem; font-weight: 700; color: var(--green); opacity: .15; line-height: 1; font-family: Georgia, serif; } .testimonial-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.06); } .testimonial-stars { display: none; } .testimonial-text { font-size: .9375rem; color: var(--gray-600); line-height: 1.6; margin-bottom: 1.25rem; font-style: italic; text-align: center; } .testimonial-author { display: flex; align-items: center; gap: .6rem; justify-content: flex-start; } .testimonial-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .75rem; flex-shrink: 0; } .testimonial-name { font-size: .875rem; font-weight: 600; color: var(--black); } .testimonial-role { font-size: .75rem; color: var(--gray-400); } .section-closing-line { width: 100%; height: 1px; background: var(--border); } .trust-bar { overflow: hidden; padding: 1.5rem 0; position: relative; border-top: 1px solid var(--border); margin-top: 2rem; } .trust-bar::before, .trust-bar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; } .trust-bar::before { left: 0; background: linear-gradient(90deg, #ffffff, transparent); } .trust-bar::after { right: 0; background: linear-gradient(270deg, #ffffff, transparent); } .trust-track { display: flex; align-items: center; gap: 0; animation: marquee 20s linear infinite; width: max-content; } .trust-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--green); white-space: nowrap; flex-shrink: 0; } .trust-badge svg { width: 16px; height: 16px; flex-shrink: 0; } .trust-sep { color: var(--border); font-size: .75rem; padding: 0 1.5rem; flex-shrink: 0; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* CTA Band */ .cta-band { padding: 3.5rem 2rem 2rem; background: #ffffff; text-align: center; position: relative; } .cta-band-title { font-size: clamp(1.4rem, 3.5vw, 2rem); font-weight: 700; letter-spacing: -.03em; color: var(--text); margin-bottom: .5rem; } .cta-band-desc { font-size: .95rem; color: var(--text-body); max-width: 420px; margin: 0 auto; line-height: 1.55; } /* Contact */ .contact { padding: 3rem 1.5rem 4rem; background: #ffffff; border-top: none; } .contact-layout { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; } .contact-info h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 1rem; color: var(--black); } .contact-info > p { font-size: .95rem; color: var(--gray-600); line-height: 1.55; margin-bottom: 1.5rem; } .contact-trust { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; } .contact-trust-item { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 500; color: var(--gray-600); } .contact-trust-item svg { width: 16px; height: 16px; stroke: var(--green); stroke-width: 2; fill: none; flex-shrink: 0; } .contact-form { display: flex; flex-direction: column; gap: .875rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; } .form-field { display: flex; flex-direction: column; gap: .35rem; } .form-field label { font-size: .75rem; font-weight: 600; color: var(--gray-400); letter-spacing: .03em; text-transform: uppercase; } .form-field input, .form-field textarea { border: 1.5px solid var(--gray-200); border-radius: 12px; padding: 12px 16px; font-size: .9375rem; font-family: inherit; background: var(--gray-100); transition: all .4s var(--ease); outline: none; color: var(--black); } .form-field input:focus, .form-field textarea:focus { border-color: var(--green); background: #fff; box-shadow: 0 0 0 4px rgba(61,90,0,.06); } .form-field textarea { resize: vertical; min-height: 100px; } .form-consent { display: flex; align-items: flex-start; gap: 10px; font-size: .8125rem; color: var(--gray-400); line-height: 1.5; } .form-consent input[type="checkbox"] { margin-top: 3px; accent-color: var(--green); } .submit-btn { width: 100%; padding: 14px; background: var(--green); color: #fff; border: none; border-radius: 14px; font-size: 1rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .4s var(--ease); position: relative; overflow: hidden; animation: btnGlow 3s ease-in-out infinite; } @keyframes btnGlow { 0%, 100% { box-shadow: 0 4px 20px rgba(61,90,0,.1); } 50% { box-shadow: 0 8px 35px rgba(61,90,0,.25); } } .submit-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,.12); transform: translate(-50%, -50%); transition: width .5s, height .5s; } .submit-btn:hover::after { width: 400px; height: 400px; } .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(61,90,0,.25); } /* ═══ FOOTER ═══ */ footer { padding: 3rem 2rem; border-top: 1px solid var(--gray-200); } .footer-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; } footer p { font-size: .8125rem; color: var(--gray-400); } .footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; } .footer-links a, .footer-email { font-size: .8125rem; color: var(--gray-400); text-decoration: none; transition: color .2s; } .footer-links a:hover, .footer-email:hover { color: var(--text-heading); } /* ╔══════════════════════════════════════════════════════════╗ ║ MULTI-PAGE ADDITIONS ║ ║ Same tokens and patterns as the home page ║ ╚══════════════════════════════════════════════════════════╝ */ /* ═══ NAV LINKS + MOBILE MENU ═══ */ .nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; } .nav-links a { font-size: .8125rem; font-weight: 500; color: var(--text-body); text-decoration: none; transition: color .2s; position: relative; white-space: nowrap; } .nav-links a:hover, .nav-links a.active { color: var(--text-heading); } .nav-links a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--primary); } .nav-right { display: flex; align-items: center; gap: .75rem; } .nav-toggle { display: none; width: 36px; height: 36px; border: none; background: transparent; cursor: pointer; position: relative; } .nav-toggle span { position: absolute; left: 9px; right: 9px; height: 2px; background: var(--text-heading); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; } .nav-toggle span:nth-child(1) { top: 12px; } .nav-toggle span:nth-child(2) { top: 17px; } .nav-toggle span:nth-child(3) { top: 22px; } nav.open .nav-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); } nav.open .nav-toggle span:nth-child(2) { opacity: 0; } nav.open .nav-toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } .mobile-menu { display: none; } /* ═══ PAGE HERO (inner pages — shorter version of home hero) ═══ */ .hero.page-hero { min-height: auto; padding: 9.5rem 2rem 5rem; } .page-hero .section-label { opacity: 0; animation: rise .7s var(--ease-out) .05s forwards; margin-bottom: 1rem; } .page-hero h1 { font-size: clamp(2.3rem, 5.5vw, 4.2rem); margin-top: 0; margin-bottom: 1.25rem; max-width: 880px; } .page-hero-sub { font-size: clamp(1rem, 1.6vw, 1.125rem); color: var(--text-body); max-width: 620px; line-height: 1.65; margin-bottom: 2.25rem; opacity: 0; animation: rise .8s var(--ease-out) .5s forwards; } .page-hero .hero-ctas { animation-delay: .85s; } /* ═══ GENERIC SECTIONS ═══ */ .section { padding: 5rem 2rem; background: var(--bg); position: relative; } .section.tint { background: linear-gradient(180deg, #ffffff 0%, var(--bg-tint) 50%, #ffffff 100%); } .section.tight-top { padding-top: 1rem; } .container { max-width: 1100px; margin: 0 auto; } .container.narrow { max-width: 760px; } .section-intro { text-align: center; color: var(--text-body); max-width: 600px; margin: -1.25rem auto 3rem; font-size: .975rem; line-height: 1.6; } /* ═══ STEPS ═══ */ .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .steps-grid.three { grid-template-columns: repeat(3, 1fr); } .step-card { background: var(--bg-section); border-radius: 20px; padding: 2rem 1.5rem; border: 1px solid var(--border); position: relative; transition: all .4s var(--ease); } .step-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.06); border-color: rgba(61,90,0,.25); } .step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; box-shadow: 0 4px 16px rgba(61,90,0,.2); } .step-card h3, .feature-box h3, .mini-card h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; color: var(--text-heading); margin-bottom: .5rem; line-height: 1.25; } .step-card p, .feature-box p, .mini-card p { font-size: .875rem; color: var(--text-body); line-height: 1.6; } /* ═══ FEATURE BOXES ═══ */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .feature-box { background: var(--bg-section); border-radius: 20px; padding: 2rem; transition: all .4s var(--ease); } .feature-box:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.06); } .feature-box:hover .service-card-icon { transform: scale(1.08) rotate(-3deg); } .feature-box .service-card-icon { margin-bottom: 1.25rem; } /* ═══ MINI CARDS (e.g. website pages) ═══ */ .mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .mini-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; transition: all .4s var(--ease); border-left: 3px solid var(--primary); } .mini-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.05); transform: translateY(-2px); } /* ═══ HIGHLIGHT PANEL (green / dark) ═══ */ .highlight-panel { background: var(--primary); color: #fff; border-radius: 28px; padding: 3rem; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: center; } .highlight-panel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 60%); pointer-events: none; } .highlight-panel.dark { background: var(--bg-dark); } .highlight-panel.gradient { background: linear-gradient(180deg, #3D5A00 0%, #1a2600 100%); } .highlight-panel > * { position: relative; } .hp-label { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: .6rem; } .highlight-panel h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin-bottom: .9rem; } .highlight-panel p { color: rgba(255,255,255,.72); font-size: .95rem; line-height: 1.65; } .highlight-panel p a { color: #fff; font-weight: 600; } .hp-stat { text-align: center; } .hp-was { font-size: 1.25rem; font-weight: 600; color: rgba(255,255,255,.55); text-decoration: line-through; text-decoration-thickness: 2px; margin-bottom: .25rem; } .hp-big { font-size: clamp(4rem, 10vw, 6.5rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; } .hp-big-label { font-size: .75rem; color: rgba(255,255,255,.55); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-top: .5rem; } /* ═══ SPLIT (text + panel) ═══ */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; } .split h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; color: var(--text-heading); margin-bottom: 1rem; } .split p { color: var(--text-body); line-height: 1.65; margin-bottom: 1rem; font-size: .975rem; } .check-panel { background: var(--bg-section); border-radius: 24px; padding: 2rem 2rem 1.25rem; border: 1.5px solid var(--primary); } .check-panel-title { font-size: .75rem; font-weight: 600; color: var(--text-label); letter-spacing: .05em; text-transform: uppercase; margin-bottom: .5rem; } .check-panel .feature-item:first-child { border-top: none; } .check-panel .feature-item { color: var(--text-heading); font-weight: 500; } /* ═══ PORTFOLIO ═══ */ .portfolio-card { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; background: var(--bg-section); border-radius: 20px; padding: 1.75rem 2rem; text-decoration: none; border: 1px solid var(--border); transition: all .4s var(--ease); } .portfolio-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.06); border-color: rgba(61,90,0,.25); } .portfolio-name { font-size: 1.125rem; font-weight: 700; color: var(--text-heading); letter-spacing: -.02em; } .portfolio-meta { font-size: .8125rem; color: var(--text-label); margin-top: .2rem; } .portfolio-link { font-size: .875rem; font-weight: 600; color: var(--primary); white-space: nowrap; display: inline-flex; gap: 6px; transition: gap .3s var(--ease); } .portfolio-card:hover .portfolio-link { gap: 10px; } .portfolio-list { display: grid; gap: 1rem; } /* ═══ FAQ ═══ */ .faq-group { margin-bottom: 3rem; } .faq-group:last-child { margin-bottom: 0; } .faq-group-title { font-size: .8125rem; font-weight: 600; color: var(--primary); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .5rem; } .faq-item { border-bottom: 1px solid var(--border); } .faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; font-size: 1.0625rem; font-weight: 600; color: var(--text-heading); letter-spacing: -.01em; transition: color .2s; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--primary); } .faq-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--primary-light); color: var(--primary); flex-shrink: 0; position: relative; transition: background .3s, color .3s; } .faq-icon::before, .faq-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 11px; height: 2px; background: currentColor; border-radius: 2px; transform: translate(-50%, -50%); } .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s var(--ease); } .faq-item[open] .faq-icon { background: var(--primary); color: #fff; } .faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); } .faq-answer { padding: 0 3rem 1.5rem 0; color: var(--text-body); font-size: .95rem; line-height: 1.7; animation: faqIn .4s var(--ease-out); } .faq-answer a { color: var(--primary); font-weight: 600; text-decoration: none; } .faq-answer a:hover { text-decoration: underline; } @keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ═══ CLIENT MAP ═══ */ .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 900px; margin: 0 auto 3rem; } .map-card { background: var(--bg-section); border-radius: 28px; padding: 2rem; border: 1px solid var(--border); position: relative; } .map-wrap { position: relative; width: 100%; } #usMap { width: 100%; height: auto; display: block; overflow: visible; } #usMap .state { fill: #e6ecd9; stroke: #fff; stroke-width: .75; transition: fill .3s; } #usMap .state.has-client { fill: #C5D9A8; } #usMap .state-borders { fill: none; stroke: #fff; stroke-width: 1; stroke-linejoin: round; } .client-ring { fill: var(--primary); transform-box: fill-box; transform-origin: center; animation: ringPulse 2.4s ease-out infinite; pointer-events: none; } @keyframes ringPulse { 0% { transform: scale(1); opacity: .35; } 100% { transform: scale(3.2); opacity: 0; } } .client-dot { fill: var(--primary); stroke: #fff; stroke-width: 2; cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform .2s var(--ease); } .client-dot:hover, .client-dot.on { transform: scale(1.35); } .map-tooltip { position: absolute; pointer-events: none; background: var(--bg-dark); color: #fff; padding: .6rem .85rem; border-radius: 10px; font-size: .8125rem; line-height: 1.35; white-space: nowrap; transform: translate(-50%, calc(-100% - 14px)); opacity: 0; transition: opacity .2s; z-index: 5; box-shadow: 0 8px 24px rgba(0,0,0,.18); } .map-tooltip.on { opacity: 1; } .map-tooltip.below { transform: translate(-50%, 14px); } .map-tooltip strong { display: block; font-weight: 600; } .map-tooltip span { color: rgba(255,255,255,.6); } .map-legend { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; font-size: .8125rem; color: var(--text-label); } .legend-dot, .legend-state { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: middle; } .legend-dot { border-radius: 50%; background: var(--primary); } .legend-state { border-radius: 3px; background: #C5D9A8; } .client-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; } .client-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: .85rem; transition: all .4s var(--ease); } .client-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.05); transform: translateY(-2px); } .client-card .testimonial-avatar { width: 38px; height: 38px; } .client-name { font-size: .9375rem; font-weight: 600; color: var(--text-heading); } .client-loc { font-size: .8125rem; color: var(--text-label); } .client-loc a { color: var(--primary); text-decoration: none; font-weight: 600; } /* ═══ ABOUT ═══ */ .prose p { font-size: 1.0625rem; color: var(--text-body); line-height: 1.75; margin-bottom: 1.25rem; } .prose p strong { color: var(--text-heading); font-weight: 600; } .prose .lead { font-size: clamp(1.3rem, 2.5vw, 1.65rem); color: var(--text-heading); font-weight: 600; letter-spacing: -.02em; line-height: 1.4; margin-bottom: 1.75rem; } .team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 880px; margin: 0 auto; } .team-card { background: var(--bg-section); border-radius: 24px; padding: 2.25rem; transition: all .4s var(--ease); } .team-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.06); } .team-photo { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, #1a2600 100%); color: #fff; font-weight: 700; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; overflow: hidden; } .team-photo img { width: 100%; height: 100%; object-fit: cover; } .team-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--text-heading); } .team-role { font-size: .75rem; font-weight: 600; color: var(--primary); letter-spacing: .05em; text-transform: uppercase; margin: .25rem 0 1rem; } .team-bio { font-size: .9rem; color: var(--text-body); line-height: 1.65; } .team-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.25rem; } .tag { font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 980px; background: var(--primary-light); color: var(--primary); } /* ═══ FINAL CTA (all inner pages) ═══ */ .cta-final { padding: 2rem 2rem 5rem; background: #fff; } .cta-final-card { max-width: 1100px; margin: 0 auto; background: var(--bg-dark); border-radius: 28px; padding: 4.5rem 2rem; text-align: center; position: relative; overflow: hidden; } .cta-final-card::before { content: ''; position: absolute; inset: -50%; background: radial-gradient(circle at 50% 100%, rgba(107,154,30,.35) 0%, transparent 45%); animation: pulse 6s ease-in-out infinite; pointer-events: none; } .cta-final-card > * { position: relative; } .cta-final-card .section-label { color: var(--primary-bright); } .cta-final-card h2 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin-bottom: .75rem; } .cta-final-card p { color: rgba(255,255,255,.6); max-width: 480px; margin: 0 auto 2rem; line-height: 1.6; } .cta-final-card .hero-ctas { opacity: 1; animation: none; justify-content: center; } .cta-final-card .btn-secondary { color: #fff; } .cta-final-card .btn-secondary:hover { background: rgba(255,255,255,.08); } .btn-primary.light { background: #fff; color: var(--text-heading); } .btn-primary.light:hover { box-shadow: 0 12px 40px rgba(255,255,255,.15); } /* ═══ VIDEO TESTIMONIAL ═══ */ .video-card { max-width: 900px; margin: 0 auto; border-radius: 28px; overflow: hidden; background: var(--bg-dark); border: 1px solid var(--border); box-shadow: 0 25px 70px rgba(0,0,0,.08); } .video-card video { display: block; width: 100%; height: auto; aspect-ratio: 1208 / 580; background: #000; } .video-caption { text-align: center; margin-top: 1.25rem; font-size: .875rem; color: var(--text-label); } .video-caption strong { color: var(--text-heading); font-weight: 600; } /* ═══ MAP + STATE LIST SIDE BY SIDE ═══ */ .map-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; } .map-layout .map-card { padding: 1.5rem; } .map-side-title { font-size: .75rem; font-weight: 600; color: var(--text-label); letter-spacing: .05em; text-transform: uppercase; margin-bottom: .85rem; } .map-layout .client-grid { grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 0; } .map-layout .client-card { padding: .6rem .75rem; gap: .6rem; border-radius: 12px; cursor: default; } .map-layout .client-card .testimonial-avatar { width: 30px; height: 30px; font-size: .68rem; } .map-layout .client-name { font-size: .875rem; } @media (max-width: 900px) { .map-layout { grid-template-columns: 1fr; } .map-layout .client-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .map-layout .client-grid { grid-template-columns: 1fr 1fr; } } /* ═══ HOME: FEATURE STAT + TRUST CHIPS ═══ */ .feature-stat { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; border-radius: 28px; padding: 2.5rem; overflow: hidden; display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; align-items: center; color: #fff; background: linear-gradient(160deg, #4a6b0a 0%, var(--primary) 45%, #1a2600 100%); box-shadow: 0 25px 70px rgba(61,90,0,.22); } .feature-stat::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, transparent 55%); pointer-events: none; } .feature-stat > * { position: relative; } .fs-num { font-size: clamp(4rem, 12vw, 6.5rem); font-weight: 700; letter-spacing: -.05em; line-height: .95; } .fs-line { font-size: clamp(1.05rem, 2.4vw, 1.3rem); line-height: 1.4; color: rgba(255,255,255,.88); margin-top: .75rem; max-width: 22ch; } .fs-line strong { color: #fff; font-weight: 700; } .fs-note { font-size: .75rem; color: rgba(255,255,255,.55); margin-top: 1.25rem; } .fs-chart { display: flex; align-items: flex-end; justify-content: center; gap: 1rem; height: 280px; } .fs-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; width: 42%; max-width: 130px; } .fs-bar { width: 100%; border-radius: 16px; display: flex; align-items: flex-start; justify-content: center; padding-top: .6rem; font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em; transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease-out); } .feature-stat.show .fs-bar { transform: scaleY(1); } .feature-stat.show .fs-col:nth-child(2) .fs-bar { transition-delay: .25s; } .fs-bar.small { height: 22%; background: rgba(255,255,255,.16); color: rgba(255,255,255,.85); } .fs-bar.tall { height: 100%; background: linear-gradient(180deg, #a8cc5c 0%, var(--primary-bright) 100%); color: #1a2600; box-shadow: 0 10px 30px rgba(0,0,0,.2); } .fs-label { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; margin-top: .6rem; white-space: nowrap; } .fs-sublabel { font-size: .75rem; line-height: 1.35; color: rgba(255,255,255,.65); margin-top: .2rem; text-align: center; } .trust-chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.25rem; } .trust-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.1rem; border-radius: 980px; background: var(--bg); border: 1px solid var(--border); font-size: .875rem; font-weight: 600; color: var(--text-heading); box-shadow: 0 4px 16px rgba(0,0,0,.04); } .trust-chip svg { width: 18px; height: 18px; stroke: var(--primary); stroke-width: 2; fill: none; flex-shrink: 0; } @media (max-width: 680px) { .feature-stat { grid-template-columns: 1fr; padding: 2rem 1.5rem 1.75rem; gap: 1.5rem; border-radius: 24px; } .fs-line { max-width: none; } .fs-chart { height: 230px; order: 2; } .fs-copy { display: contents; } .fs-num { order: 0; } .fs-line { order: 1; margin-top: -.75rem; } .fs-note { order: 3; margin-top: 0; } .trust-chip { font-size: .8125rem; padding: .6rem .95rem; } } /* Simplified feature card: bars only */ .feature-stat.fs-simple { display: block; max-width: 560px; padding: 2.75rem 2rem 2.25rem; text-align: center; } .fs-simple .fs-chart { height: 300px; gap: 1.5rem; } .fs-simple .fs-col { width: 44%; max-width: 180px; } .fs-simple .fs-bar { align-items: center; padding-top: 0; font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: -.04em; } .fs-simple .fs-bar span { display: flex; flex-direction: column; align-items: center; line-height: 1; } .fs-simple .fs-bar small { font-size: .9rem; font-weight: 600; letter-spacing: 0; margin-top: .35rem; opacity: .75; } .fs-simple .fs-bar.small { height: 24%; } .fs-simple .fs-label { font-size: .875rem; margin-top: .85rem; } .fs-simple .fs-note { margin-top: 1.75rem; } @media (max-width: 680px) { .feature-stat.fs-simple { padding: 2.25rem 1.25rem 1.5rem; } .fs-simple .fs-chart { height: 250px; } } /* Home hero: original type and size, fixed 4-line headline. Equal space above and below: offset the fixed nav (52px), no negative pull-up. */ .hero:has(.h1-home) { padding: calc(52px + 4rem) 2rem 4rem; } .hero h1.h1-home { margin-top: 0; } @media (max-width: 600px) { .hero:has(.h1-home) { padding-left: 1.5rem; padding-right: 1.5rem; } } /* ═══ LIFETIME VALUE BARS (Realtor Connections, white card) ═══ */ .ltv-card { max-width: 820px; margin: 0 auto; background: var(--bg); border: 1px solid var(--border); border-radius: 28px; padding: 2.5rem 2rem 2rem; text-align: center; box-shadow: 0 25px 70px rgba(0,0,0,.06); } .ltv-sub { font-size: .875rem; color: var(--text-label); margin-bottom: 2rem; } .ltv-chart { display: flex; align-items: flex-end; justify-content: center; gap: clamp(.6rem, 3vw, 1.75rem); height: 320px; } .ltv-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; width: 22%; max-width: 150px; } .ltv-val { font-size: clamp(1rem, 3.2vw, 1.6rem); font-weight: 700; letter-spacing: -.03em; color: var(--text-heading); margin-bottom: .5rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .ltv-bar { width: 100%; border-radius: 14px; transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease-out); } .ltv-card.show .ltv-bar { transform: scaleY(1); } .ltv-card.show .ltv-col:nth-child(2) .ltv-bar { transition-delay: .15s; } .ltv-card.show .ltv-col:nth-child(3) .ltv-bar { transition-delay: .3s; } .ltv-card.show .ltv-col:nth-child(4) .ltv-bar { transition-delay: .45s; } .ltv-bar.b0 { height: 7%; background: #e3e3e8; } .ltv-bar.b1 { height: 20%; background: #C5D9A8; } .ltv-bar.b3 { height: 55%; background: linear-gradient(180deg, var(--primary-bright) 0%, #557f12 100%); } .ltv-bar.b5 { height: 88%; background: linear-gradient(180deg, var(--primary) 0%, #1a2600 100%); box-shadow: 0 14px 34px rgba(61,90,0,.22); } .ltv-label { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-label); margin-top: .75rem; line-height: 1.35; } .ltv-total { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: clamp(.95rem, 1.8vw, 1.1rem); color: var(--text-body); line-height: 1.55; } .ltv-total strong { color: var(--primary); font-weight: 700; } @media (max-width: 600px) { .ltv-card { padding: 2rem 1rem 1.5rem; border-radius: 22px; } .ltv-chart { height: 260px; } .ltv-label { font-size: .65rem; letter-spacing: .02em; } } .feature-grid.seven { grid-template-columns: repeat(12, 1fr); } .feature-grid.seven > * { grid-column: span 3; } .feature-grid.seven > *:nth-child(n+5) { grid-column: span 4; } .feature-grid.seven .feature-box { display: flex; flex-direction: column; } .feature-grid.seven .service-card-cta { margin-top: auto; padding-top: 1rem; } .fb-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } .fb-top .service-card-icon { margin: 0; } .fb-num { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; color: var(--primary); opacity: .55; font-variant-numeric: tabular-nums; } @media (max-width: 900px) { .feature-grid.seven { grid-template-columns: 1fr 1fr; } .feature-grid.seven > *, .feature-grid.seven > *:nth-child(n+5) { grid-column: span 1; } .feature-grid.seven > *:nth-child(7) { grid-column: 1 / -1; } } @media (max-width: 600px) { .feature-grid.seven { grid-template-columns: 1fr; } .feature-grid.seven > *:nth-child(7) { grid-column: auto; } } .check-panel.counts-card { max-width: 640px; margin: 0 auto; } .excl-row { max-width: 640px; margin: 1rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .excl-item { display: flex; gap: .9rem; align-items: flex-start; background: var(--bg); border: 1px solid var(--border); border-radius: 18px; padding: 1.25rem; } .excl-item .service-card-icon { width: 40px; height: 40px; border-radius: 12px; margin: 0; flex-shrink: 0; } .excl-item .service-card-icon svg { width: 19px; height: 19px; } .excl-item h3 { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; color: var(--text-heading); margin-bottom: .2rem; } .excl-item p { font-size: .85rem; color: var(--text-body); line-height: 1.5; } @media (max-width: 600px) { .excl-row { grid-template-columns: 1fr; } } /* ═══ STEPS: connector pill on a line between two step cards ═══ */ .steps-grid.three.has-bridge { grid-template-columns: 1fr minmax(240px, .55fr) 1fr; gap: 0; align-items: stretch; } .has-bridge .step-card { text-align: center; display: flex; flex-direction: column; align-items: center; } .bridge-connector { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 .25rem; } .bridge-connector::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, rgba(61,90,0,.15), rgba(61,90,0,.45), rgba(61,90,0,.15)); } .bridge-pill { position: relative; display: inline-flex; align-items: center; gap: .55rem; background: var(--primary); color: #fff; font-weight: 600; font-size: .9375rem; letter-spacing: -.01em; padding: .5rem 1.1rem .5rem .5rem; border-radius: 980px; white-space: nowrap; box-shadow: 0 8px 24px rgba(61,90,0,.22); } .bp-num { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; } @media (max-width: 900px) { .steps-grid.three.has-bridge { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } .bridge-connector { height: 84px; padding: 0; } .bridge-connector::before { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform: translateX(-50%); background: linear-gradient(180deg, rgba(61,90,0,.15), rgba(61,90,0,.45), rgba(61,90,0,.15)); } } /* ═══ JOURNEY STRIP (Realtor Connections: after the intro) ═══ */ .journey-strip { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: .75rem; } .js-stage { background: var(--bg-section); border: 1px solid var(--border); border-radius: 20px; padding: 2rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; } .js-stage .service-card-icon { margin-bottom: 1.1rem; } .js-stage h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; color: var(--text-heading); margin-bottom: .45rem; } .js-stage p { font-size: .875rem; color: var(--text-body); line-height: 1.6; } .js-stage.is-goal { background: var(--primary); border-color: var(--primary); box-shadow: 0 16px 40px rgba(61,90,0,.22); } .js-stage.is-goal h3 { color: #fff; } .js-stage.is-goal p { color: rgba(255,255,255,.75); } .js-stage.is-goal .service-card-icon { background: rgba(255,255,255,.14); } .js-stage.is-goal .service-card-icon svg { stroke: #fff; } .js-arrow { display: flex; align-items: center; justify-content: center; } .js-arrow svg { width: 22px; height: 22px; stroke: var(--primary); stroke-width: 2; fill: none; opacity: .55; } .journey-strip + .compare-takeaway { margin-top: 1.75rem; } .compare-takeaway strong { color: var(--primary); font-weight: 700; } @media (max-width: 760px) { .journey-strip { grid-template-columns: 1fr; max-width: 440px; gap: .5rem; } .js-arrow svg { transform: rotate(90deg); } .js-stage { padding: 1.5rem 1.25rem; } } /* ═══ GOOGLE ADS CALCULATOR ═══ */ .calc-card { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; border-radius: 28px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 25px 70px rgba(0,0,0,.06); } .calc-inputs { background: var(--bg); padding: 2.25rem; display: flex; flex-direction: column; gap: 1.6rem; } .calc-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; gap: 1rem; } .calc-row label { font-size: .875rem; font-weight: 600; color: var(--text-heading); } .calc-row output { font-size: 1.05rem; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; } .calc-field input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--primary) var(--fill, 50%), var(--border) var(--fill, 50%)); outline: none; cursor: pointer; } .calc-field input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,.15); cursor: pointer; } .calc-field input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); cursor: pointer; } .calc-field input[type=range]:focus-visible { box-shadow: 0 0 0 4px rgba(61,90,0,.15); } .calc-results { background: linear-gradient(160deg, #4a6b0a 0%, var(--primary) 45%, #1a2600 100%); color: #fff; padding: 2.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; align-content: center; } .calc-res.main { grid-column: 1 / -1; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.15); } .calc-num { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; } .calc-res.main .calc-num { font-size: clamp(2.6rem, 6vw, 3.6rem); } .calc-lbl { font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: .45rem; } .calc-roi { grid-column: 1 / -1; font-size: .95rem; color: rgba(255,255,255,.85); } .calc-roi strong { color: #fff; } .calc-note { grid-column: 1 / -1; font-size: .75rem; color: rgba(255,255,255,.5); } .highlight-panel.single { grid-template-columns: 1fr; text-align: center; } .highlight-panel.light { background: var(--bg-tint); color: var(--text-heading); border: 1.5px solid rgba(61,90,0,.25); } .highlight-panel.light::before { display: none; } .highlight-panel.light .hp-label { color: var(--primary); } .highlight-panel.light p { color: var(--text-body); } .highlight-panel.light .hp-link { color: var(--primary); } .hp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.25rem; } .hp-chips span { font-size: .8125rem; font-weight: 600; padding: 6px 12px; border-radius: 980px; background: var(--bg); border: 1px solid rgba(61,90,0,.2); color: var(--primary); } .highlight-panel.light .hp-link:hover { background: rgba(61,90,0,.08); } .highlight-panel.single p { max-width: 560px; margin: 0 auto; } .hp-link { color: #fff; margin-top: 1.25rem; } .hp-link:hover { background: rgba(255,255,255,.08); } @media (max-width: 760px) { .calc-card { grid-template-columns: 1fr; border-radius: 22px; } .calc-inputs, .calc-results { padding: 1.75rem 1.5rem; } } /* ═══ GOOGLE ADS: HOW WE IMPROVE THE NUMBERS ═══ */ .opt-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .opt-card { background: var(--bg); border: 1px solid var(--border); border-radius: 24px; padding: 2rem; } .opt-label { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-label); margin-bottom: .6rem; } .opt-move { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .opt-from { font-size: 1.5rem; font-weight: 700; color: var(--text-label); text-decoration: line-through; text-decoration-thickness: 2px; } .opt-to { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 700; letter-spacing: -.03em; color: var(--primary); } .opt-arrow { color: var(--primary); font-weight: 700; font-size: 1.25rem; } .opt-card .feature-item { color: var(--text-body); } .opt-card .feature-item strong { color: var(--text-heading); font-weight: 600; } .opt-result { max-width: 1000px; margin: 1.25rem auto 0; background: var(--primary); color: #fff; border-radius: 24px; padding: 2rem; text-align: center; box-shadow: 0 20px 50px rgba(61,90,0,.2); } .opt-res-row { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; } .opt-res-k { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); } .opt-res-v { font-size: clamp(1.1rem, 2.4vw, 1.4rem); font-weight: 600; color: rgba(255,255,255,.75); margin-top: .2rem; } .opt-res-v.strong { color: #fff; font-weight: 700; } .opt-result .opt-arrow { color: rgba(255,255,255,.7); } .opt-result p { margin-top: .9rem; color: rgba(255,255,255,.85); font-size: 1rem; } .opt-result p strong { color: #fff; } .opt-btn { margin-top: 1.25rem; font-family: inherit; } @media (max-width: 760px) { .opt-grid { grid-template-columns: 1fr; } .opt-card, .opt-result { padding: 1.5rem 1.25rem; border-radius: 20px; } .opt-res-row { gap: .75rem; } } /* ═══ WEBSITES: SHOWCASE + 5-SECOND TEST ═══ */ .browser { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: 0 25px 70px rgba(0,0,0,.08); } .browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f1f1f4; border-bottom: 1px solid var(--border); } .browser-bar > span { width: 10px; height: 10px; border-radius: 50%; background: #d9d9de; flex-shrink: 0; } .browser-url { margin-left: 10px; flex: 1; max-width: 320px; background: #fff; border-radius: 6px; padding: 3px 10px; font-size: .75rem; color: var(--text-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .browser img { display: block; width: 100%; height: auto; } .showcase { max-width: 1000px; margin: 0 auto; } .showcase .browser.main { border-radius: 18px; } .showcase-row { max-width: 1000px; margin: 1.5rem auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .showcase-row .browser { box-shadow: 0 12px 34px rgba(0,0,0,.07); } .showcase-row .browser-bar { padding: 7px 10px; } .showcase-row .browser-bar > span { width: 7px; height: 7px; } .showcase-row .browser-url { font-size: .65rem; padding: 2px 8px; margin-left: 6px; } .showcase-row .browser img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; } .showcase-cap { text-align: center; font-size: .8125rem; font-weight: 600; color: var(--text-heading); margin-top: .75rem; } .showcase-row.two { grid-template-columns: repeat(2, 1fr); } .feature-grid.five { grid-template-columns: repeat(6, 1fr); } .feature-grid.five > * { grid-column: span 2; } .feature-grid.five > *:nth-child(n+4) { grid-column: span 3; } @media (max-width: 900px) { .feature-grid.five { grid-template-columns: 1fr 1fr; } .feature-grid.five > *, .feature-grid.five > *:nth-child(n+4) { grid-column: span 1; } .feature-grid.five > *:nth-child(5) { grid-column: 1 / -1; } } @media (max-width: 600px) { .feature-grid.five { grid-template-columns: 1fr; } .feature-grid.five > *:nth-child(5) { grid-column: auto; } .showcase-row.two { grid-template-columns: 1fr; } } .showcase-note { text-align: center; font-size: .75rem; color: var(--text-label); margin-top: 1.25rem; } .included-card { max-width: 820px; margin: 2.5rem auto 0; background: var(--bg); border: 1px solid var(--border); border-radius: 24px; padding: 2rem 2.25rem; box-shadow: 0 12px 40px rgba(0,0,0,.05); } .inc-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); } .inc-head h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--text-heading); } .inc-badge { font-size: .75rem; font-weight: 600; padding: 5px 12px; border-radius: 980px; background: var(--primary); color: #fff; } .inc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .inc-label { font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-label); margin-bottom: .75rem; } .inc-list { list-style: none; display: grid; gap: .6rem; } .inc-list li { display: flex; align-items: center; gap: .6rem; font-size: .9375rem; font-weight: 500; color: var(--text-heading); } .inc-list .feature-check { margin-top: 0; } @media (max-width: 600px) { .included-card { padding: 1.5rem 1.25rem; } .inc-cols { grid-template-columns: 1fr; gap: 1.5rem; } } .insight-wrap { max-width: 980px; margin: 4rem auto 0; text-align: center; } .insight-title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; letter-spacing: -.03em; color: var(--text-heading); } .insight-panel { margin-top: 1.75rem; display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; text-align: left; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .ip-stat { padding: 1.75rem 1.5rem 1.75rem 0; display: flex; flex-direction: column; justify-content: center; } .ip-num { font-size: clamp(2.8rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; color: var(--text-heading); } .ip-lbl { margin-top: .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-label); max-width: 200px; line-height: 1.45; } .ip-list { display: contents; } .ip-item { padding: 1.75rem 1.5rem; border-left: 1px solid var(--border); } .ip-item h3 { font-size: 1rem; font-weight: 700; letter-spacing: -.02em; color: var(--text-heading); margin-bottom: .35rem; } .ip-item h3::before { content: ''; display: block; width: 22px; height: 3px; border-radius: 2px; background: var(--primary); margin-bottom: .8rem; } .ip-item p { font-size: .875rem; color: var(--text-body); line-height: 1.55; } @media (max-width: 760px) { .insight-panel { grid-template-columns: 1fr; } .ip-stat { padding: 1.5rem 0; text-align: center; align-items: center; border-bottom: 1px solid var(--border); } .ip-lbl { max-width: none; } .ip-item { border-left: none; border-top: 1px solid var(--border); padding: 1.25rem 0; } .ip-item:first-child { border-top: none; } .insight-wrap { margin-top: 3rem; } } .test-where { display: inline-block; margin-top: 1rem; font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 980px; background: var(--primary-light); color: var(--primary); } @media (max-width: 760px) { .showcase-row { grid-template-columns: 1fr; max-width: 480px; } .browser-url { font-size: .65rem; } } /* ═══ WEBSITES: highlight column A, SEO matrix, maps note ═══ */ .compare-table.hl-a .ct-row .ct-b { background: transparent; } .compare-table.hl-a .ct-row .ct-a { background: rgba(61,90,0,.035); } .compare-table.hl-a .ct-row.ct-head .ct-a { background: var(--primary); color: #fff; } .compare-table.hl-a .ct-row.ct-head .ct-b { background: var(--bg); color: var(--text-heading); } .ct-list { list-style: none; display: grid; gap: .4rem; } .ct-list li { position: relative; padding-left: 1.4rem; } .ct-list li::before { content: ''; position: absolute; left: 0; top: .3em; width: 14px; height: 14px; border-radius: 50%; background: var(--primary-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12 5L6.5 10.5 4 8' fill='none' stroke='%233D5A00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat; } .ct-b .ct-list li::before { background-color: #ececf0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12 5L6.5 10.5 4 8' fill='none' stroke='%239a9aa2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .roads { display: flex; flex-direction: column; gap: .6rem; } .roads-src { display: grid; gap: .6rem; } .road { display: flex; align-items: center; gap: .85rem; border-radius: 16px; padding: .9rem 1.1rem; } .road .service-card-icon { width: 40px; height: 40px; border-radius: 12px; margin: 0; flex-shrink: 0; } .road .service-card-icon svg { width: 19px; height: 19px; } .road h3 { font-size: .975rem; font-weight: 700; letter-spacing: -.01em; color: var(--text-heading); line-height: 1.2; } .road span { font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; } .road.on { background: var(--bg); border: 1.5px solid rgba(61,90,0,.35); } .road.on span { color: var(--primary); } .road.off { background: var(--bg-section); border: 1.5px dashed #c8c8ce; } .road.off span { color: var(--text-label); } .road.off .service-card-icon { background: #ececf0; } .road.off .service-card-icon svg { stroke: #9a9aa2; } .roads-arrow { display: flex; justify-content: center; } .roads-arrow svg { width: 26px; height: 26px; stroke: var(--primary); stroke-width: 2; fill: none; opacity: .6; } .road.dest { background: var(--primary); box-shadow: 0 14px 34px rgba(61,90,0,.22); } .road.dest h3 { color: #fff; } .road.dest span { color: rgba(255,255,255,.7); } .road.dest .service-card-icon { background: rgba(255,255,255,.14); } .road.dest .service-card-icon svg { stroke: #fff; } .funnel { max-width: 980px; margin: 0 auto 3.5rem; display: flex; flex-direction: column; align-items: center; } .funnel-src { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .funnel-src .road { flex-direction: column; text-align: center; gap: .6rem; padding: 1.25rem 1rem; } .funnel-lines { width: 100%; height: 90px; display: block; } .fl { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; } .fl.on { stroke: var(--primary); stroke-dasharray: 6 8; animation: flow 1.2s linear infinite; opacity: .7; } .fl.off { stroke: #b9b9c0; stroke-dasharray: 4 6; } @keyframes flow { to { stroke-dashoffset: -28; } } @media (prefers-reduced-motion: reduce) { .fl.on { animation: none; } } .funnel .road.dest { width: min(420px, 100%); justify-content: center; padding: 1.25rem 1.5rem; } @media (max-width: 600px) { .funnel-src { gap: .5rem; } .funnel-src .road { padding: .9rem .4rem; border-radius: 14px; } .funnel-src .road .service-card-icon { width: 34px; height: 34px; border-radius: 10px; } .funnel-src .road h3 { font-size: .8rem; } .funnel-src .road span { font-size: .6rem; letter-spacing: .01em; line-height: 1.35; display: block; } .funnel-lines { height: 60px; } } .seo-matrix { max-width: 980px; margin: 3.5rem auto 0; background: var(--bg); border: 1px solid var(--border); border-radius: 24px; overflow: hidden; } .mx-intro { padding: 2rem 2rem 1.5rem; text-align: center; } .mx-intro h3 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; color: var(--text-heading); margin-bottom: .5rem; } .mx-intro p { color: var(--text-body); max-width: 560px; margin: 0 auto; font-size: .95rem; line-height: 1.6; } .mx-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; border-top: 1px solid var(--border); } .mx-task { padding: .8rem 1.25rem; font-size: .875rem; color: var(--text-heading); display: flex; align-items: center; } .mx-c { padding: .8rem .75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: .875rem; color: var(--text-body); } .mx-c.ours { background: rgba(61,90,0,.05); } .mx-head .mx-c { font-weight: 700; color: var(--text-heading); font-size: .9rem; padding: 1rem .75rem; } .mx-head .mx-c.ours { background: var(--primary); color: #fff; } .mx-head .mx-c span, .mx-price .mx-c span { font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .65; margin-top: .2rem; } .mx-yes { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); display: inline-flex; align-items: center; justify-content: center; } .mx-yes svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 2.5; fill: none; } .mx-c:not(.ours) .mx-yes { background: #c9c9cf; } .mx-no { color: #c3c3c9; font-weight: 700; } .mx-price { background: var(--bg-section); } .mx-price .mx-task { font-weight: 700; } .mx-price .mx-c strong { font-size: 1.05rem; color: var(--text-heading); } .mx-price .mx-c.ours strong { color: var(--primary); } .maps-note { max-width: 980px; margin: 1.25rem auto 0; display: grid; grid-template-columns: 200px 1fr; gap: 2rem; align-items: center; background: var(--bg-tint); border: 1.5px solid rgba(61,90,0,.2); border-radius: 24px; padding: 2rem; } .maps-note .hp-label { color: var(--primary); } .maps-note h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); font-weight: 700; letter-spacing: -.02em; color: var(--text-heading); margin-bottom: .6rem; line-height: 1.3; } .maps-note p { color: var(--text-body); font-size: .925rem; line-height: 1.65; } .maps-visual { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: .6rem; display: flex; flex-direction: column; gap: .35rem; } .mv-row { height: 18px; border-radius: 5px; font-size: .6rem; font-weight: 700; display: flex; align-items: center; padding: 0 .5rem; } .mv-row.ad { background: #ececf0; color: #9a9aa2; } .mv-row.spot { background: var(--primary-light); color: var(--primary); border: 1px solid rgba(61,90,0,.25); } .mv-map { height: 52px; border-radius: 6px; background: linear-gradient(135deg, #e6ecd9 25%, #dfe6cf 25%, #dfe6cf 50%, #e6ecd9 50%, #e6ecd9 75%, #dfe6cf 75%); background-size: 14px 14px; position: relative; } .mv-map span { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); border: 2px solid #fff; } .mv-map span:nth-child(1) { left: 22%; top: 30%; } .mv-map span:nth-child(2) { left: 55%; top: 55%; } .mv-map span:nth-child(3) { left: 75%; top: 22%; } .mv-group { position: relative; border-radius: 8px; padding: .4rem; display: flex; flex-direction: column; gap: .3rem; } .mv-group.maps { border: 1.5px solid var(--primary); } .mv-group.web { border: 1.5px dashed #9a9aa2; } .mv-tag { font-size: .55rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .mv-group.maps .mv-tag { color: var(--primary); } .mv-group.web .mv-tag { color: #7a7a82; } .mv-row.web { background: #f3f3f6; height: 14px; } .seo-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: .9rem 0 1rem; } .seo-kinds h4 { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 700; color: var(--text-heading); margin-bottom: .35rem; } .seo-kinds p { font-size: .875rem; } .seo-kinds strong { color: var(--text-heading); font-weight: 600; } .dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .dot.maps { background: var(--primary); } .dot.web { border: 1.5px dashed #7a7a82; } .seo-why { padding-top: .9rem; border-top: 1px solid rgba(61,90,0,.15); display: grid; gap: .6rem; } .seo-why p { font-size: .925rem; } .seo-why strong { color: var(--text-heading); font-weight: 700; } @media (max-width: 760px) { .seo-kinds { grid-template-columns: 1fr; } .mx-row { grid-template-columns: 1.4fr .8fr .8fr .8fr; } .mx-task { padding: .7rem .75rem; font-size: .78rem; } .mx-c { padding: .7rem .3rem; font-size: .75rem; } .mx-head .mx-c { font-size: .72rem; padding: .8rem .3rem; } .mx-head .mx-c span, .mx-price .mx-c span { font-size: .58rem; letter-spacing: 0; } .mx-price .mx-c strong { font-size: .8rem; } .mx-intro { padding: 1.5rem 1.25rem 1.25rem; } .maps-note { grid-template-columns: 1fr; padding: 1.5rem 1.25rem; } .maps-visual { max-width: 220px; } } /* ═══ RESPONSIVE (original + additions) ═══ */ @media (max-width: 980px) { .nav-links { display: none; } .nav-toggle { display: block; } .mobile-menu { display: block; max-height: 0; overflow: hidden; transition: max-height .45s var(--ease-out); } nav.open .mobile-menu { max-height: 520px; border-top: 1px solid var(--border); } nav.open { background: rgba(255,255,255,.97); } .mobile-menu a { display: block; padding: 14px 2rem; font-size: 1rem; font-weight: 600; color: var(--text-heading); text-decoration: none; border-bottom: 1px solid var(--border); } .mobile-menu a:last-child { border-bottom: none; } .mobile-menu a.active { color: var(--primary); } } @media (max-width: 900px) { .service-cards { grid-template-columns: 1fr; max-width: 480px; } .contact-layout { grid-template-columns: 1fr; gap: 2rem; } .steps-grid, .steps-grid.three, .feature-grid, .client-grid, .mini-grid { grid-template-columns: 1fr 1fr; } .split, .highlight-panel, .team-grid { grid-template-columns: 1fr; } .split { gap: 2rem; } .stats-row { grid-template-columns: 1fr; max-width: 520px; } } @media (max-width: 600px) { .hero { padding: 5rem 1.5rem 4rem; } .hero.page-hero { padding: 7.5rem 1.25rem 3.5rem; } .hero-ctas { flex-direction: column; width: 100%; } .btn-primary, .btn-secondary { width: 100%; justify-content: center; } .form-row { grid-template-columns: 1fr; } .footer-inner { flex-direction: column; gap: .75rem; align-items: flex-start; } .cursor-glow { display: none; } .nav-inner { padding: 0 1.25rem; } .nav-cta { padding: 7px 14px; } .mobile-menu a { padding: 14px 1.25rem; } .section { padding: 4rem 1.25rem; } .steps-grid, .steps-grid.three, .feature-grid, .client-grid, .mini-grid { grid-template-columns: 1fr; } .highlight-panel { padding: 2.25rem 1.5rem; border-radius: 22px; } .map-card { padding: 1rem; border-radius: 20px; } .faq-answer { padding-right: 0; } .portfolio-card { flex-direction: column; align-items: flex-start; } .cta-final { padding: 1rem 1.25rem 4rem; } .cta-final-card { padding: 3.5rem 1.5rem; border-radius: 22px; } .video-card { border-radius: 20px; } } /* ╔══════════════════════════════════════════════════════════╗ ║ EDUCATION: COMPARISONS ║ ╚══════════════════════════════════════════════════════════╝ */ /* ═══ BAR COMPARISON (Realtor Connections) ═══ */ .bar-compare { max-width: 760px; margin: 0 auto; background: var(--bg-section); border: 1px solid var(--border); border-radius: 28px; padding: 2.75rem 2rem 2rem; text-align: center; } .bc-eyebrow { font-size: .75rem; font-weight: 600; color: var(--text-label); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5rem; } .bc-title { font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 700; letter-spacing: -.03em; color: var(--text-heading); line-height: 1.15; margin-bottom: 2.25rem; } .bc-chart { display: flex; justify-content: center; align-items: flex-end; gap: clamp(1rem, 5vw, 3rem); height: 340px; } .bc-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; width: min(240px, 42%); } .bc-bar { width: 100%; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: scaleY(0); transform-origin: bottom; transition: transform 1.1s var(--ease-out); position: relative; overflow: hidden; } .bar-compare.show .bc-bar { transform: scaleY(1); } .bar-compare.show .bc-col:nth-child(2) .bc-bar { transition-delay: .25s; } .bc-bar.small { height: 30%; background: linear-gradient(180deg, #e8e8ed 0%, #d6d6dc 100%); color: var(--text-heading); } .bc-bar.tall { height: 100%; background: linear-gradient(180deg, var(--primary-bright) 0%, var(--primary) 55%, #1a2600 100%); color: #fff; box-shadow: 0 20px 50px rgba(61,90,0,.25); } .bc-bar.tall::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.14) 0%, transparent 55%); } .bc-num { font-size: clamp(2.4rem, 7vw, 4.2rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; position: relative; } .bc-unit { font-size: clamp(.8rem, 1.8vw, 1rem); font-weight: 600; margin-top: .35rem; position: relative; opacity: .85; } .bc-label { font-size: .95rem; font-weight: 700; color: var(--text-heading); margin-top: 1rem; line-height: 1.3; min-height: 2.6em; } .bc-note { font-size: .8125rem; color: var(--text-label); margin-top: 1.25rem; } /* ═══ COMPARISON TABLE ═══ */ .compare-table { max-width: 980px; margin: 0 auto; border-radius: 24px; overflow: hidden; border: 1px solid var(--border); background: var(--bg); } .ct-row { display: grid; grid-template-columns: 1fr 1.35fr 1.35fr; border-top: 1px solid var(--border); } .ct-row:first-child { border-top: none; } .ct-row > div { padding: 1.1rem 1.35rem; font-size: .9rem; line-height: 1.55; color: var(--text-body); } .ct-row .ct-label { font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-label); display: flex; align-items: center; background: var(--bg-section); } .ct-row .ct-b { background: rgba(61,90,0,.035); } .ct-head > div { padding-top: 1.5rem; padding-bottom: 1.5rem; } .ct-head .ct-a, .ct-head .ct-b { font-size: 1.0625rem; font-weight: 700; color: var(--text-heading); letter-spacing: -.01em; } .ct-head .ct-b { background: var(--primary); color: #fff; } .ct-head .ct-label { background: var(--bg-section); } .ct-sub { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .6; margin-top: .2rem; } .compare-table.even .ct-row .ct-b { background: transparent; } .compare-table.even .ct-row.ct-head .ct-b { background: var(--text-heading); color: #fff; } .ct-row strong { color: var(--text-heading); font-weight: 600; } .compare-takeaway { max-width: 980px; margin: 1.5rem auto 0; display: flex; gap: .85rem; align-items: flex-start; background: var(--primary-light); border-radius: 18px; padding: 1.25rem 1.5rem; font-size: .95rem; color: var(--text-heading); line-height: 1.6; } .compare-takeaway svg { width: 22px; height: 22px; flex-shrink: 0; stroke: var(--primary); stroke-width: 2; fill: none; margin-top: 2px; } .compare-takeaway a { color: var(--primary); font-weight: 600; } .compare-fine { max-width: 980px; margin: .85rem auto 0; font-size: .8rem; color: var(--text-label); text-align: center; } /* ═══ SEARCH RESULTS MOCK (Google Ads) ═══ */ .serp { background: var(--bg); border: 1px solid var(--border); border-radius: 24px; padding: 1.25rem; box-shadow: 0 25px 70px rgba(0,0,0,.07); } .serp-bar { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--border); border-radius: 980px; padding: .6rem 1rem; font-size: .875rem; color: var(--text-heading); margin-bottom: 1rem; } .serp-bar svg { width: 16px; height: 16px; stroke: var(--text-label); stroke-width: 2; fill: none; } .serp-block { border-radius: 14px; padding: .85rem 1rem; margin-bottom: .6rem; position: relative; border: 1px solid var(--border); } .serp-block:last-child { margin-bottom: 0; } .serp-tag { position: absolute; top: .75rem; right: .85rem; font-size: .65rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 980px; } .serp-kicker { font-size: .7rem; font-weight: 600; color: var(--text-label); margin-bottom: .35rem; } .serp-line { height: 8px; border-radius: 4px; background: #e8e8ed; margin-top: .4rem; } .serp-line.w60 { width: 60%; } .serp-line.w40 { width: 40%; } .serp-line.w80 { width: 80%; } .serp-line.w50 { width: 50%; } .serp-title { font-size: .85rem; font-weight: 600; color: #1a0dab; } .serp-lsa { background: rgba(61,90,0,.05); border-color: rgba(61,90,0,.3); } .serp-lsa .serp-tag { background: var(--primary); color: #fff; } .serp-lsa-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .4rem; } .serp-lsa-card { background: #fff; border-radius: 10px; padding: .55rem; border: 1px solid var(--border); } .serp-verified { display: inline-flex; align-items: center; gap: 3px; font-size: .6rem; font-weight: 700; color: var(--primary); margin-top: .35rem; } .serp-verified svg { width: 10px; height: 10px; stroke: var(--primary); stroke-width: 3; fill: none; } .serp-ppc { background: var(--bg-section); } .serp-ppc .serp-tag { background: var(--text-heading); color: #fff; } .serp-map { background: var(--bg-section); } .serp-map .serp-tag, .serp-organic .serp-tag { background: var(--border); color: var(--text-body); } .serp-map-box { height: 46px; border-radius: 8px; margin-top: .4rem; background: linear-gradient(135deg, #e6ecd9 25%, #dfe6cf 25%, #dfe6cf 50%, #e6ecd9 50%, #e6ecd9 75%, #dfe6cf 75%); background-size: 18px 18px; } .serp-legend { list-style: none; display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; } .serp-legend li { display: flex; gap: .85rem; align-items: flex-start; font-size: .925rem; color: var(--text-body); line-height: 1.55; } .serp-legend strong { color: var(--text-heading); } .serp-key { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: #fff; } /* ═══ FOUNDATION vs GROWTH (Websites) ═══ */ .stack-visual { display: flex; flex-direction: column; gap: .75rem; } .sv-layer { border-radius: 18px; padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1rem; } .sv-layer .service-card-icon { margin: 0; flex-shrink: 0; } .sv-layer h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; } .sv-layer p { font-size: .85rem; line-height: 1.5; margin: .15rem 0 0; } .sv-seo { background: var(--bg-section); border: 1.5px dashed rgba(61,90,0,.35); color: var(--text-heading); } .sv-seo p { color: var(--text-body); } .sv-site { background: var(--primary); color: #fff; } .sv-site p { color: rgba(255,255,255,.75); } .sv-site .service-card-icon { background: rgba(255,255,255,.14); } .sv-site .service-card-icon svg { stroke: #fff; } .sv-arrow { text-align: center; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-label); } @media (max-width: 760px) { .ct-row { grid-template-columns: 1fr 1fr; } .ct-row .ct-label { grid-column: 1 / -1; padding-top: .7rem; padding-bottom: .7rem; } .ct-head .ct-label { display: none; } .ct-row > div { padding: .9rem 1rem; font-size: .85rem; } .bc-chart { height: 280px; } .bar-compare { padding: 2rem 1.25rem 1.5rem; border-radius: 22px; } .serp-lsa-cards { grid-template-columns: 1fr 1fr; } .serp-lsa-cards .serp-lsa-card:nth-child(3) { display: none; } } /* ── Clients page: About + why us ── */ .about-split { align-items: center; } .about-split .section-label { color: var(--green); } .about-split .feature-item { font-weight: 400; color: var(--text-body); } .about-split .feature-item strong { color: var(--text-heading); font-weight: 600; } .skip-wrap { margin-top: 4.5rem; } .skip-title { text-align: center; font-size: .75rem; font-weight: 600; color: var(--text-label); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 1.25rem; } .skip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .skip-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 20px; padding: 1.5rem 1.5rem 1.35rem; display: flex; flex-direction: column; } .skip-top { display: flex; align-items: center; gap: .65rem; margin-bottom: .75rem; } .skip-top h3 { font-size: 1.0625rem; font-weight: 600; color: var(--text-heading); letter-spacing: -.01em; } .skip-x { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--gray-100, #f2f2f2); display: grid; place-items: center; } .skip-x svg { width: 12px; height: 12px; stroke: var(--gray-500, #8a8a8a); stroke-width: 2; fill: none; stroke-linecap: round; } .skip-card p { font-size: .9rem; line-height: 1.6; color: var(--text-body); margin-bottom: 1rem; flex: 1; } .skip-tag { align-self: flex-start; font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: 980px; background: var(--gray-100, #f2f2f2); color: var(--gray-600, #666); } .skip-note { text-align: center; font-size: .875rem; color: var(--text-body); margin-top: 1.25rem; } .skip-note a { color: var(--primary); font-weight: 600; text-decoration: none; } .team-line { margin-top: 3.5rem; text-align: center; } .team-line-title { font-size: .75rem; font-weight: 600; color: var(--text-label); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 1.25rem; } .team-skills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: left; } .team-skill { background: var(--bg-section); border-radius: 20px; padding: 1.5rem; } .team-chip { display: inline-block; font-size: .8125rem; font-weight: 600; padding: .4rem .9rem; border-radius: 980px; background: var(--primary-light); color: var(--primary); margin-bottom: 1rem; } .team-skill h3 { font-size: 1rem; font-weight: 600; color: var(--text-heading); letter-spacing: -.01em; margin-bottom: .5rem; } .team-skill p { font-size: .875rem; line-height: 1.6; color: var(--text-body); } @media (max-width: 1024px) { .team-skills { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .team-skills { grid-template-columns: 1fr; } } @media (max-width: 768px) { .skip-grid { grid-template-columns: 1fr; } .skip-wrap { margin-top: 3rem; } } /* ── Map hint (replaces legend) ── */ .map-hint { text-align: center; margin-top: 1rem; font-size: .8125rem; color: var(--text-label); } .map-hint .hint-tap { display: none; } @media (hover: none) { .map-hint .hint-hover { display: none; } .map-hint .hint-tap { display: inline; } } .ip-num.ip-word { font-size: clamp(2.2rem, 3.6vw, 2.8rem); letter-spacing: -.04em; } /* ── Home hero on phones: full screen, bigger headline, scroll cue at the bottom (laptop/desktop unchanged) ── */ @media (max-width: 767px) { .hero:has(.h1-home) { min-height: 100vh; min-height: 100svh; justify-content: flex-start; padding: calc(52px + 1.5rem) 1.25rem 2.25rem; } .hero h1.h1-home { font-size: clamp(2.8rem, 14.5vw, 4.4rem); margin-top: auto; } .hero:has(.h1-home) .hero-eyebrow { margin-bottom: 0; } .hero:has(.h1-home) .hero-ctas { margin-top: auto; } } /* ── Websites page: same breathing room under the funnel as between sections ── */ .funnel { margin-bottom: 180px; } @media (max-width: 600px) { .funnel { margin-bottom: 148px; } } /* ── Spacing rule: a new topic with its own title inside a section gets section-sized space ── */ .insight-wrap, .seo-matrix, .maps-note { margin-top: 180px; } .skip-wrap, .team-line { margin-top: 100px; } /* About Us: three parts of one story */ .excl-row { margin-top: 1.5rem; } @media (max-width: 600px) { .insight-wrap, .seo-matrix, .maps-note { margin-top: 148px; } .skip-wrap, .team-line { margin-top: 80px; } } /* ── Websites page: "Built on Real Insight" and the free-website box read as one block ── */ .section.pair-top { padding-bottom: 2.5rem; } .section.pair-bottom { padding-top: 2rem; } /* ── FAQ: section jump links ── */ .faq-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 auto 3.5rem; } .faq-jump a { font-size: .875rem; font-weight: 600; padding: .55rem 1.1rem; border-radius: 980px; background: var(--primary-light); color: var(--primary); text-decoration: none; transition: background .2s, color .2s; } .faq-jump a:hover { background: var(--primary); color: #fff; } .faq-group { scroll-margin-top: 90px; } /* ── FAQ: rich answers (paragraphs, lists, comparison table) ── */ .faq-answer p { margin-bottom: .85rem; } .faq-answer p:last-child { margin-bottom: 0; } .faq-answer ul, .faq-answer ol { margin: 0 0 .85rem 1.15rem; } .faq-answer li { margin-bottom: .4rem; } .faq-answer strong { color: var(--text-heading); font-weight: 600; } .faq-table-wrap { margin: .25rem 0 .6rem; border: 1px solid var(--border); border-radius: 16px; overflow-x: auto; } .faq-table { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.4; } .faq-table th { text-align: left; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-label); background: var(--bg-section); padding: .75rem .9rem; white-space: nowrap; } .faq-table td { padding: .65rem .9rem; border-top: 1px solid var(--border); color: var(--text-body); } .faq-table td:first-child { font-weight: 600; color: var(--text-heading); } .faq-table tr.hl td { background: var(--primary-light); } .faq-table tr.hl td:first-child { color: var(--primary); } .faq-fine { font-size: .8rem; color: var(--text-label); font-style: italic; } @media (max-width: 600px) { .faq-table { font-size: .78rem; } .faq-table th { white-space: normal; font-size: .66rem; } .faq-table th, .faq-table td { padding: .55rem .5rem; } .faq-table td:first-child { min-width: 6.25rem; } } /* ── FAQ strategy table: tap a row for details ── */ .ft-hint { color: var(--text-label); font-size: .85rem; white-space: nowrap; } .faq-table .ft-row { cursor: pointer; transition: background .2s; } .faq-table .ft-row:hover td { background: var(--bg-section); } .faq-table .ft-row.hl:hover td { background: rgba(61,90,0,.12); } .faq-table .ft-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .faq-table .ft-row td:first-child { position: relative; padding-left: 2.1rem; } .faq-table .ft-row td:first-child::before { content: ""; position: absolute; left: .9rem; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: translateY(-70%) rotate(45deg); transition: transform .25s; } .faq-table .ft-row.open td:first-child::before { transform: translateY(-30%) rotate(-135deg); } .faq-table .ft-row.open td { border-bottom: none; } .faq-table .ft-detail td { border-top: none; padding: 0 .9rem .85rem 2.1rem; font-size: .86rem; line-height: 1.6; color: var(--text-body); font-weight: 400; animation: faqIn .3s var(--ease-out); } .faq-table .ft-row.hl + .ft-detail td { background: var(--primary-light); } @media (max-width: 600px) { .faq-table .ft-row td:first-child { padding-left: 1.6rem; } .faq-table .ft-row td:first-child::before { left: .55rem; width: 6px; height: 6px; } .faq-table .ft-detail td { padding: 0 .6rem .75rem 1.6rem; font-size: .8rem; } } /* ── Home hero tagline: break evenly on phones ── */ .hero:has(.h1-home) .hero-eyebrow { text-wrap: balance; } .hero-num { font-weight: 800; } /* ── Home: subtle real-result line under the realtor bars ── */ #story { scroll-margin-top: 70px; } .story-line { position: relative; z-index: 1; max-width: 560px; margin: 1.25rem auto 0; text-align: center; font-size: .9rem; line-height: 1.55; color: var(--text-body); text-wrap: balance; } .story-line strong { color: var(--text-heading); font-weight: 600; } .story-line span { color: var(--text-label); font-size: .8em; white-space: nowrap; } .story-line.story-wide { max-width: 720px; } /* ── Realtor Connections: "Would an agent refer you?" self-check ── */ .agent-check { max-width: 980px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: 28px; padding: 2rem 2rem 1.75rem; box-shadow: 0 20px 60px rgba(0,0,0,.04); } .ac-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .ac-title { font-size: 1.35rem; font-weight: 700; color: var(--text-heading); letter-spacing: -.02em; } .ac-sub { font-size: .9rem; color: var(--text-body); margin-top: .15rem; } .ac-score { flex: none; display: flex; align-items: baseline; gap: .3rem; font-size: 2.4rem; font-weight: 800; letter-spacing: -.04em; color: var(--primary); line-height: 1; } .ac-score small { font-size: .9rem; font-weight: 600; color: var(--text-label); letter-spacing: 0; } .ac-bar { height: 6px; border-radius: 99px; background: var(--bg-section); margin: 1.25rem 0 1.25rem; overflow: hidden; } .ac-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--primary-bright); transition: width .45s var(--ease-out); } .ac-list { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } .ac-item { display: flex; align-items: flex-start; gap: .85rem; width: 100%; text-align: left; font: inherit; background: var(--bg-section); border: 1.5px solid transparent; border-radius: 16px; padding: .9rem 1rem; cursor: pointer; transition: background .2s, border-color .2s; -webkit-tap-highlight-color: transparent; } .ac-item:hover { border-color: var(--border); } .ac-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .ac-box { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; border: 2px solid #c9cfbf; display: grid; place-items: center; background: #fff; transition: all .2s; } .ac-box svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.4; opacity: 0; transition: opacity .2s; } .ac-item[aria-pressed="true"] { background: var(--primary-light); border-color: rgba(61,90,0,.25); } .ac-item[aria-pressed="true"] .ac-box { background: var(--primary); border-color: var(--primary); } .ac-item[aria-pressed="true"] .ac-box svg { opacity: 1; } .ac-text { display: flex; flex-direction: column; gap: .15rem; } .ac-text strong { font-size: .95rem; font-weight: 600; color: var(--text-heading); } .ac-text span { font-size: .84rem; line-height: 1.5; color: var(--text-body); } .ac-result { margin-top: 1.25rem; text-align: center; font-size: .95rem; color: var(--text-body); min-height: 1.5em; } .ac-result a { color: var(--primary); font-weight: 600; text-decoration: none; white-space: nowrap; } .agent-check.done .ac-score { color: var(--primary-bright); } @media (max-width: 760px) { .agent-check { padding: 1.35rem 1rem 1.25rem; border-radius: 22px; } .ac-title { font-size: 1.15rem; } .ac-score { font-size: 2rem; } .ac-list { grid-template-columns: 1fr; gap: .5rem; } .ac-item { padding: .75rem .85rem; } .ac-text span { font-size: .8rem; } } .ac-list .ac-item:last-child:nth-child(odd) { grid-column: 1 / -1; } @media (max-width: 760px) { .ac-list .ac-item:last-child:nth-child(odd) { grid-column: auto; } } .ac-text .ac-short { display: none; } @media (max-width: 760px) { .ac-text .ac-long { display: none; } .ac-text .ac-short { display: block; } .ac-item { align-items: center; } .ac-box { margin-top: 0; } } @media (max-width: 760px) { .ac-title { font-size: 1.05rem; } .ac-sub { font-size: .82rem; } .ac-bar { margin: 1rem 0; } .ac-list { gap: .4rem; } .ac-item { padding: .6rem .75rem; gap: .7rem; border-radius: 14px; } .ac-box { width: 22px; height: 22px; } .ac-text { gap: .05rem; } .ac-text strong { font-size: .88rem; } .ac-text .ac-short { font-size: .76rem; line-height: 1.4; } .ac-result { font-size: .85rem; margin-top: 1rem; } } .funnel .road.dest { text-align: center; } /* ── Contact form: Netlify honeypot (hidden) + privacy notes ── */ .form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-consent a, .form-note a { color: var(--primary); font-weight: 600; text-decoration: none; } .form-note { font-size: .78rem; color: var(--text-label); text-align: center; margin-top: .75rem; } /* ── Privacy policy page ── */ .legal h2 { font-size: 1.25rem; font-weight: 700; color: var(--text-heading); letter-spacing: -.015em; margin: 2.25rem 0 .75rem; } .legal p, .legal li { font-size: 1rem; color: var(--text-body); line-height: 1.7; } .legal p { margin-bottom: 1rem; } .legal ul { margin: 0 0 1rem 1.2rem; } .legal li { margin-bottom: .4rem; } .legal strong { color: var(--text-heading); font-weight: 600; } .legal a { color: var(--primary); font-weight: 600; text-decoration: none; } .legal .legal-meta { font-size: .9rem; color: var(--text-label); } /* Website page: the road diagram now ends its own section */ .container > .funnel:last-child{margin-bottom:0} /* Website page: on phones show only the home page and the sample report */ @media (max-width: 600px) { #example .showcase-row.two > div:first-child { display: none; } } /* Tablets and narrow laptop windows: keep the two smaller screenshots side by side */ @media (min-width: 601px) and (max-width: 760px) { #example .showcase-row.two { grid-template-columns: 1fr 1fr; max-width: none; } } /* Website page: on phones the "Two kinds of SEO" title sits above the Google diagram */ @media (max-width: 900px) { .maps-note > div:last-child { display: contents; } .maps-note .mn-head { order: -1; } .maps-note .mn-head h3 { margin-bottom: 0; } .maps-note .maps-visual { justify-self: center; width: 100%; } } /* Google Ads page: "What you get" as simple divided rows (no boxes) */ .get-rows { max-width: 880px; margin: 0 auto; border-top: 1px solid rgba(61,90,0,.18); } .get-row { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; padding: 1.6rem 0; border-bottom: 1px solid rgba(61,90,0,.18); align-items: baseline; } .get-row h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; color: var(--text-heading); } .get-row p { font-size: .975rem; line-height: 1.65; color: var(--text-body); } @media (max-width: 760px) { .get-row { grid-template-columns: 1fr; gap: .4rem; padding: 1.25rem 0; } } /* Centered step cards (same look as Realtor Connections "How It Works") */ .steps-grid.centered .step-card { text-align: center; display: flex; flex-direction: column; align-items: center; } /* Google Ads page: "Where Most Campaigns Waste Money" cards with the brand green border */ .feature-grid.leaks .feature-box { border: 1.5px solid rgba(61,90,0,.35); } @media (max-width: 760px) { .feature-grid.leaks { gap: .75rem; } .feature-grid.leaks .feature-box { padding: 1.25rem 1.25rem; } } /* Google Ads page: on phones the 6 leak cards become a swipe row */ .swipe-nav { display: none; } @media (max-width: 760px) { .feature-grid.leaks { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .75rem; margin: 0 -1.25rem; padding: .25rem 1.25rem .75rem; scroll-padding: 0 1.25rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .feature-grid.leaks::-webkit-scrollbar { display: none; } .feature-grid.leaks .feature-box { flex: 0 0 82%; scroll-snap-align: start; } .feature-grid.leaks .feature-box:hover { transform: none; box-shadow: none; } .swipe-nav { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-top: .6rem; } .swipe-dots { display: flex; gap: 6px; } .swipe-dots span { width: 7px; height: 7px; border-radius: 99px; background: rgba(61,90,0,.22); transition: width .3s var(--ease), background .3s; } .swipe-dots span.on { width: 20px; background: var(--primary); } .swipe-dots span { cursor: pointer; } .feature-grid.leaks { cursor: grab; user-select: none; } .feature-grid.leaks.dragging { cursor: grabbing; } .swipe-hint { font-size: .8rem; font-weight: 600; color: var(--primary); transition: opacity .4s; } .swipe-hint { max-height: 2em; overflow: hidden; transition: opacity .4s, max-height .4s; } .swipe-nav.used .swipe-hint { opacity: 0; max-height: 0; } } /* Google Ads page: Search Ads column emphasized in black (both are services, so not the green "ours" highlight) */ .compare-table.even.dark-a .ct-row.ct-head .ct-b { background: var(--bg); color: var(--text-heading); } .compare-table.even.dark-a .ct-row.ct-head .ct-a { background: var(--text-heading); color: #fff; } .compare-table.even.dark-a .ct-row.ct-head .ct-a .ct-sub { color: #fff; } /* FAQ: marketing strategy cards (tap to open) */ .strat-list { margin: .5rem 0 .6rem; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .strat-card + .strat-card { border-top: 1px solid var(--border); } .faq-item .strat-card > summary.strat-top { justify-content: flex-start; font-size: 1rem; color: var(--text-heading); } .faq-item .strat-card > summary.strat-top, .strat-top { list-style: none; display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; cursor: pointer; transition: background .2s; } .strat-top::-webkit-details-marker { display: none; } .strat-top:hover { background: var(--bg-section); } .strat-top::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: translateY(-2px) rotate(45deg); transition: transform .25s; } .strat-card[open] > .strat-top::before { transform: translateY(1px) rotate(-135deg); } .strat-top h4 { font-size: 1rem; font-weight: 700; color: var(--text-heading); letter-spacing: -.01em; margin: 0; } .strat-tag { margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--text-label); text-align: right; } .strat-body { padding: 0 1.25rem 1.1rem 2.55rem; animation: faqIn .3s var(--ease-out); } .strat-body p { font-size: .9rem; line-height: 1.6; } .faq-answer .strat-body p { margin-bottom: 0; } .strat-body p + p { margin-top: .35rem; } @media (max-width: 600px) { .faq-item .strat-card > summary.strat-top { padding: .9rem 1rem; flex-wrap: wrap; row-gap: .1rem; } .strat-tag { margin-left: 0; flex-basis: 100%; padding-left: calc(7px + .75rem); text-align: left; } .strat-body { padding: 0 1rem 1rem calc(1rem + 7px + .75rem); } } /* Contact form: "(optional)" next to a field label */ .form-field label .optional { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .75; }