; body only fades. */ html.js body{ opacity:0; transition:opacity .55s ease } html.js body.is-ready{ opacity:1 } html.js body.is-leaving{ opacity:0; transition:opacity .3s ease } html.js main{ transform:translateY(14px) scale(.996); transition:transform .55s var(--ease-reveal); } html.js body.is-ready main{ transform:none } html.js body.is-leaving main{ transform:translateY(-10px); transition:transform .3s ease; } /* ---------- Shell ---------- */ .shell{ max-width:var(--container-shell); margin-inline:auto } /* ---------- Decorative floating orbs (injected into .stage-tint) ---------- */ .orb{ position:absolute; border-radius:50%; filter:blur(56px); opacity:.6; pointer-events:none; z-index:0; animation:orbFloat 9s ease-in-out infinite alternate; } .orb-a{ width:22rem; height:22rem; top:6%; right:-6rem; background:radial-gradient(circle at 32% 32%, rgba(245,130,31,.4), transparent 70%); } .orb-b{ width:26rem; height:26rem; bottom:-8rem; left:-8rem; background:radial-gradient(circle at 60% 40%, rgba(27,94,110,.34), transparent 70%); animation-duration:12s; animation-delay:-4s; } @keyframes orbFloat{ from{ transform:translate3d(0,-14px,0) } to{ transform:translate3d(0,18px,0) } } /* ============================================================ Floating glass header ============================================================ */ .glass-header{ position:fixed; top:1.5rem; left:1.5rem; right:1.5rem; z-index:100; margin-inline:auto; max-width:var(--container-shell); display:flex; align-items:center; justify-content:space-between; gap:1rem; background:rgba(255,255,255,.72); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border:1px solid rgba(255,255,255,.7); border-radius:var(--radius-pill); box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.9); padding:.75rem 1rem .75rem 1.5rem; transition:top .35s var(--ease-reveal), padding .35s var(--ease-reveal), background .35s ease; } .glass-header.compact{ top:.75rem; padding:.5rem 1rem .5rem 1.25rem; background:rgba(255,255,255,.92); } .wordmark{ display:inline-flex; align-items:center; line-height:1 } /* exact official logo asset (logo.png, 1024×164) */ .logo-img{ height:2rem; width:auto; display:block; transition:height .35s var(--ease-reveal); } .glass-header.compact .logo-img{ height:1.7rem } /* white version on the dark footer band */ .site-footer .logo-img{ filter:brightness(0) invert(1); opacity:.92; height:1.9rem } .nav-center{ display:flex; align-items:center; gap:.25rem } .nav-center > li{ position:relative } .nav-link{ display:inline-flex; align-items:center; gap:.3rem; padding:.5rem .9rem; border-radius:var(--radius-pill); font-size:.875rem; font-weight:500; color:var(--muted); transition:color .25s var(--ease-out), background .25s var(--ease-out); } .nav-link:hover, .nav-link[aria-expanded="true"]{ color:var(--brand-teal); background:rgba(27,94,110,.07) } .nav-link .caret{ width:.7rem; height:.7rem; transition:transform .25s var(--ease-out) } .nav-link[aria-expanded="true"] .caret{ transform:rotate(180deg) } .header-cta{ display:flex; align-items:center; gap:1rem } .phone-link{ font-size:.8125rem; font-weight:600; color:var(--brand-teal); white-space:nowrap; transition:color .25s var(--ease-out); } .phone-link:hover{ color:var(--brand-orange) } .hamburger{ display:none; width:2.5rem; height:2.5rem; border-radius:var(--radius-pill); border:1px solid var(--card-border); place-items:center; transition:background .25s var(--ease-out), transform .25s var(--ease-out); } .hamburger:hover{ background:rgba(27,94,110,.07); transform:scale(1.04) } .hamburger svg{ width:1rem; height:1rem } /* ============================================================ Services mega menu ============================================================ */ .mega-menu{ position:absolute; top:calc(100% + .75rem); left:50%; transform:translateX(-50%) translateY(-8px); width:min(60rem,92vw); background:rgba(255,255,255,.9); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); border:1px solid rgba(255,255,255,.75); border-radius:1.25rem; box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.9); padding:2rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s var(--ease-reveal), transform .25s var(--ease-reveal), visibility 0s linear .25s; } .mega-menu::before{ content:""; position:absolute; top:-.85rem; left:0; right:0; height:.85rem; } .mega-menu.open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); transition:opacity .25s var(--ease-reveal), transform .25s var(--ease-reveal); } .mega-item{ display:flex; flex-direction:column; gap:.5rem; padding:.85rem; border-radius:.85rem; transition:transform .2s var(--ease-out), background .2s var(--ease-out); } .mega-item:hover{ transform:translateY(-3px); background:rgba(27,94,110,.06) } .mega-item svg{ width:1.4rem; height:1.4rem; color:var(--brand-teal); transition:color .2s var(--ease-out) } .mega-item:hover svg{ color:var(--brand-orange) } .mega-item h4{ font-size:.875rem; font-weight:600 } .mega-item p{ font-size:.75rem; color:var(--muted); line-height:1.5 } .mega-footer{ grid-column:1 / -1; border-top:1px solid var(--card-border); padding-top:1.25rem; margin-top:.25rem; display:flex; justify-content:flex-end; } .mega-footer a{ font-size:.875rem; font-weight:600; color:var(--brand-orange); transition:transform .25s var(--ease-out); display:inline-block; } .mega-footer a:hover{ transform:translateX(4px) } /* ============================================================ Shared components ============================================================ */ /* --- glass surface recipe: frosted blur + translucent fill + glossy top sheen (applied to every card surface site-wide). Alphas kept low so the backdrop blur is clearly visible. --- */ .lift-card, .svc-card, .quote-card, .info-card, .contact-form, .stat-card, .stat-chip, .contact-chip{ background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 45%), linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.34)); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); border:1px solid rgba(255,255,255,.85); box-shadow: 0 24px 60px -26px rgba(15,45,58,.3), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35); } /* --- PillBadge / eyebrow --- */ .pill-badge{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.75); background:rgba(255,255,255,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:var(--radius-pill); padding:.5rem 1rem; font-size:.8125rem; font-weight:500; color:var(--muted); box-shadow:0 6px 20px -12px rgba(15,45,58,.25); } .pill-badge svg{ width:.875rem; height:.875rem; color:var(--brand-orange) } .section-eyebrow{ font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--brand-teal); display:inline-flex; align-items:center; gap:.5rem; } .section-eyebrow::before{ content:""; width:.375rem; height:.375rem; border-radius:var(--radius-pill); background:var(--brand-orange); } /* gradient headline accent */ .accent, .grad-text{ background:var(--grad-cta); -webkit-background-clip:text; background-clip:text; color:transparent; } /* --- Buttons --- */ .btn{ display:inline-flex; align-items:center; gap:.75rem; border-radius:var(--radius-pill); padding:.875rem 1.5rem; transition:transform .3s var(--ease-out), background .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), filter .3s var(--ease-out); } .btn:hover{ transform:translateY(-2px) } .btn-solid{ background:var(--grad-cta); color:#fff; font-weight:600; box-shadow:0 14px 34px -12px rgba(238,108,31,.55), inset 0 1px 0 rgba(255,255,255,.35); } .btn-solid:hover{ filter:brightness(1.06) } .btn-solid .arrow{ width:1.75rem; height:1.75rem; border-radius:var(--radius-pill); background:#fff; color:var(--brand-orange-deep); display:grid; place-items:center; margin-right:-.375rem; transition:transform .3s var(--ease-out); } .btn-solid:hover .arrow{ transform:translate(2px,-2px) } .btn-solid .arrow svg{ width:.8rem; height:.8rem } .btn-ghost{ background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.8); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--brand-teal); font-weight:500; box-shadow:0 10px 26px -16px rgba(15,45,58,.3); } .btn-ghost:hover{ border-color:rgba(27,94,110,.3); color:var(--ink) } .btn-sm{ padding:.55rem 1.1rem; font-size:.8125rem } .btn-sm .arrow{ width:1.4rem; height:1.4rem } /* --- Text arrow link --- */ .arrow-link{ display:inline-flex; align-items:center; gap:.4rem; font-size:.9375rem; font-weight:600; color:var(--brand-orange-deep); transition:transform .25s var(--ease-out), color .25s var(--ease-out); } .arrow-link:hover{ transform:translateX(4px); color:var(--brand-teal) } /* --- StatCard --- */ .stat-card{ border-radius:var(--radius-card); padding:1.5rem 1.75rem; max-width:18rem; } .stat-card .eyebrow-label{ font-family:var(--font-mono); font-size:.6875rem; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); } .stat-card .value{ font-size:3rem; font-weight:700; letter-spacing:-.02em; line-height:1.15; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; } .stat-card .desc{ margin-top:.5rem; font-size:.875rem; color:var(--muted); line-height:1.5 } /* --- ScrollRail --- */ .scroll-rail{ position:fixed; right:1.5rem; top:50%; transform:translateY(-50%); width:2px; height:6rem; background:rgba(15,45,58,.12); border-radius:var(--radius-pill); z-index:40; pointer-events:none; } .scroll-rail .thumb{ position:absolute; left:0; top:0%; width:100%; height:20%; background:var(--brand-orange); border-radius:var(--radius-pill); } /* ============================================================ Reveal utilities — 3D entrance choreography ============================================================ */ html.js [data-reveal]{ opacity:0; transform:translateY(24px) scale(.98); transition:opacity .9s var(--ease-reveal), transform .9s var(--ease-reveal); } html.js .is-in [data-reveal], html.js [data-reveal].is-in{ opacity:1; transform:none } .lines .line{ display:block; overflow:hidden; perspective:700px } .lines .line > span{ display:block; transform-origin:0 100% } html.js .lines .line > span{ transform:translateY(110%) rotateX(28deg); opacity:0; transition:transform .9s var(--ease-reveal), opacity .9s var(--ease-reveal); } html.js .is-in .lines .line > span, html.js .lines.is-in .line > span{ transform:none; opacity:1 } .lines .line:nth-child(1) > span{ transition-delay:0ms } .lines .line:nth-child(2) > span{ transition-delay:100ms } .lines .line:nth-child(3) > span{ transition-delay:200ms } .d-100{ transition-delay:.1s !important } .d-200{ transition-delay:.2s !important } .d-300{ transition-delay:.3s !important } .d-400{ transition-delay:.4s !important } .d-500{ transition-delay:.5s !important } .d-600{ transition-delay:.6s !important } /* ============================================================ Particle stages ============================================================ */ .scene-canvas{ position:fixed; inset:0; z-index:-1; pointer-events:none } .scene-canvas canvas{ width:100%; height:100% } .ambient-canvas{ position:absolute; inset:0; z-index:-1; pointer-events:none } .ambient-canvas canvas{ width:100%; height:100% } .bg-particles{ position:fixed; inset:0; z-index:-2; pointer-events:none } .bg-particles canvas{ width:100%; height:100% } /* main must NOT create a stacking context — its backgrounds would otherwise paint over the fixed particle canvases */ main{ position:relative } /* light "stage" vignette + fine dot grid — painted BELOW the particle canvases (z -3) so particles glow on top of it */ .stage-tint{ position:relative } .stage-tint::before{ content:""; position:absolute; inset:0; z-index:-3; pointer-events:none; background-image: radial-gradient(rgba(15,45,58,.05) 1px, transparent 1.4px), radial-gradient(ellipse at 50% 42%, rgba(214,233,239,.6) 0%, rgba(255,255,255,0) 72%); background-size:26px 26px, 100% 100%; } /* ============================================================ Home — hero ============================================================ */ .hero{ min-height:100vh; position:relative; display:grid; place-items:center; text-align:center; overflow:hidden; padding:9rem 2rem 4rem; } .hero-inner{ display:flex; flex-direction:column; align-items:center; position:relative; z-index:2 } .revenue-ticker{ display:inline-flex; align-items:baseline; gap:.6rem; font-family:var(--font-mono); font-size:.8125rem; color:var(--muted); border:1px solid rgba(255,255,255,.8); background:rgba(255,255,255,.78); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:var(--radius-pill); padding:.5rem 1.1rem; box-shadow:0 6px 20px -12px rgba(15,45,58,.25); } .revenue-ticker b{ font-size:.9375rem; font-weight:600; color:var(--brand-orange-deep); font-variant-numeric:tabular-nums; } .hero h1{ max-width:16ch; font-size:3.75rem; font-weight:700; letter-spacing:-.025em; line-height:1.05; margin-top:1.5rem; } .hero .subhead{ max-width:44ch; margin-top:1.5rem; font-size:1.0625rem; color:var(--muted); line-height:1.6; } .cta-row{ display:flex; gap:.75rem; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:2rem; } /* ============================================================ Section scaffolding ============================================================ */ .section{ padding:6rem 2rem; position:relative } /* translucent so the particle layers glow through */ .section-alt{ background:linear-gradient(180deg, rgba(246,250,252,.5) 0%, rgba(237,244,247,.5) 100%) } .section-head-row{ max-width:var(--container-shell); margin:0 auto 3rem; display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; } .section-head-row h2{ font-size:2.5rem; font-weight:700; letter-spacing:-.02em; line-height:1.12; max-width:22ch; margin-top:1rem; } .section-head-row .intro{ max-width:38ch; font-size:1rem; color:var(--muted); line-height:1.6; } /* ============================================================ Home — immersive 3D service cards around the particle flow (§7) Two cards above / two below a horizontal particle stream. ============================================================ */ .svc3d{ overflow:hidden } .svc3d-stage{ max-width:var(--container-shell); margin-inline:auto; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; /* every card same height */ column-gap:clamp(2rem, 6vw, 5rem); row-gap:clamp(6rem, 16vh, 11rem); /* corridor for the particle stream */ perspective:1200px; } /* continuous, subtle 3D revolve around the particle stream: cards drift through Y/Z and rotate gently, out of sync */ .float-wrap{ height:100%; transform-style:preserve-3d; animation:cardOrbit 8s ease-in-out infinite alternate; } .float-wrap:nth-child(2){ animation-duration:9.5s; animation-delay:-3.2s } .float-wrap:nth-child(3){ animation-duration:7.2s; animation-delay:-5.1s } .float-wrap:nth-child(4){ animation-duration:8.8s; animation-delay:-1.7s } @keyframes cardOrbit{ 0% { transform:translate3d(0,-8px,0) rotateY(-3deg) rotateX(1deg) } 50% { transform:translate3d(6px,3px,22px) rotateY(0deg) rotateX(0deg) } 100%{ transform:translate3d(0,10px,4px) rotateY(3deg) rotateX(-1deg) } } .svc-card{ --ry:0deg; --rx:0deg; --tz:0px; border-radius:1.25rem; padding:1.75rem; height:100%; /* uniform size across the set */ display:flex; flex-direction:column; transform:translate(calc(var(--pointer-x,0) * 6px), calc(var(--pointer-y,0) * 4px)) rotateY(var(--ry)) rotateX(var(--rx)) translateZ(var(--tz)); transition:transform .4s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out); will-change:transform; } .svc-card ul{ flex:1 } .svc-card .svc-stat{ margin-top:auto } .svc-card:hover{ transform:translate(calc(var(--pointer-x,0) * 6px), calc(var(--pointer-y,0) * 4px - 8px)) rotateY(var(--ry)) rotateX(var(--rx)) translateZ(var(--tz)) scale(1.02); border-color:rgba(245,130,31,.45); box-shadow:0 32px 74px -26px rgba(15,45,58,.35), inset 0 1px 0 rgba(255,255,255,.9); } .svc-card > svg{ width:1.75rem; height:1.75rem; color:var(--brand-teal); margin-bottom:.9rem } .svc-card h3{ font-size:1.25rem; font-weight:700; letter-spacing:-.01em } .svc-card ul{ margin-top:.9rem; display:flex; flex-direction:column; gap:.35rem } .svc-card li{ font-size:.8125rem; color:var(--muted); line-height:1.45; padding-left:1rem; position:relative; } .svc-card li::before{ content:""; position:absolute; left:0; top:.5em; width:.3rem; height:.3rem; border-radius:50%; background:var(--brand-orange); } .svc-card .svc-stat{ margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--card-border); font-size:.8125rem; color:var(--muted); line-height:1.5; } .svc-card .svc-stat b{ display:block; font-size:1.75rem; font-weight:700; letter-spacing:-.02em; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums; } /* ============================================================ Home — about teaser / chips ============================================================ */ .about-teaser{ max-width:var(--container-shell); margin-inline:auto; display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:center; } .about-teaser p.lead{ font-size:1.0625rem; color:var(--muted); line-height:1.7 } .chip-stack{ display:flex; flex-direction:column; gap:1rem } .stat-chip{ display:flex; align-items:center; gap:.85rem; border-radius:var(--radius-card); padding:1rem 1.25rem; font-size:.9375rem; font-weight:500; } .stat-chip svg{ width:1.25rem; height:1.25rem; color:var(--brand-orange); flex-shrink:0 } /* ============================================================ Cards: success stories / blog / values / why / team ============================================================ */ .card-grid{ max-width:var(--container-shell); margin-inline:auto; display:grid; gap:1.5rem; } .cols-2{ grid-template-columns:repeat(2,1fr) } .cols-3{ grid-template-columns:repeat(3,1fr) } .cols-4{ grid-template-columns:repeat(4,1fr) } .lift-card{ border-radius:1.25rem; padding:1.75rem; transition:transform .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out); display:flex; flex-direction:column; gap:.75rem; } .lift-card:hover{ transform:translateY(-6px); border-color:rgba(245,130,31,.45); box-shadow:0 28px 64px -24px rgba(15,45,58,.32), inset 0 1px 0 rgba(255,255,255,.9); } .lift-card svg.icon{ width:1.75rem; height:1.75rem; color:var(--brand-teal) } .lift-card:hover svg.icon{ color:var(--brand-orange) } .lift-card h3{ font-size:1.125rem; font-weight:700; letter-spacing:-.01em } .lift-card p{ font-size:.875rem; color:var(--muted); line-height:1.6; flex:1 } .lift-card .learn-more{ font-size:.8125rem; font-weight:600; color:var(--brand-orange-deep); transition:transform .25s var(--ease-out); align-self:flex-start; } .lift-card .learn-more:hover{ transform:translateX(4px) } /* case-study card */ .case-card .thumb{ aspect-ratio:16/9; border-radius:.85rem; background:linear-gradient(135deg, rgba(245,130,31,.16), rgba(27,94,110,.16)), #f2f7f9; display:grid; place-items:center; font-weight:700; font-size:1.5rem; color:rgba(15,45,58,.3); letter-spacing:.02em; } .case-card .metric{ font-size:1rem; font-weight:700 } .case-card .metric b{ color:var(--brand-orange-deep) } .case-card .tags{ display:flex; gap:.4rem; flex-wrap:wrap } .case-card .tags span{ font-size:.6875rem; font-weight:500; border:1px solid rgba(27,94,110,.18); border-radius:var(--radius-pill); padding:.25rem .7rem; color:var(--brand-teal); background:rgba(27,94,110,.06); } /* blog card */ .blog-card .date{ font-family:var(--font-mono); font-size:.6875rem; text-transform:uppercase; letter-spacing:.08em; color:var(--brand-orange-deep); } /* team card */ .team-card{ text-align:center } .team-card .avatar{ border:1px solid var(--glass-border); border-radius:var(--radius-pill); aspect-ratio:1; width:100%; max-width:11rem; margin:0 auto 1rem; display:grid; place-items:center; font-size:1.75rem; font-weight:700; color:rgba(15,45,58,.32); background:radial-gradient(circle at 30% 25%, rgba(245,130,31,.22), transparent 60%), radial-gradient(circle at 70% 80%, rgba(27,94,110,.2), transparent 60%), #f2f7f9; box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.9); } .team-card .name{ font-weight:700; font-size:1rem } .team-card .role{ font-size:.8125rem; color:var(--muted); margin-top:.25rem } .badge-row{ max-width:var(--container-shell); margin:3rem auto 0; display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; } .badge-row span{ border:1px solid rgba(255,255,255,.8); border-radius:var(--radius-pill); padding:.6rem 1.4rem; font-size:.8125rem; font-weight:600; color:var(--brand-teal); background:rgba(255,255,255,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 8px 22px -14px rgba(15,45,58,.28); } /* ============================================================ Testimonials ============================================================ */ .testimonial-head{ text-align:center; margin-bottom:3rem } .testimonial-head .big-stat{ font-size:3rem; font-weight:700; letter-spacing:-.02em; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums; } .testimonial-head p{ color:var(--muted); margin-top:.5rem } .quote-card{ border-radius:1.25rem; padding:2rem; display:flex; flex-direction:column; gap:1.25rem; transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out); } .quote-card:hover{ transform:translateY(-6px); box-shadow:0 28px 64px -24px rgba(15,45,58,.32), inset 0 1px 0 rgba(255,255,255,.9) } .quote-card blockquote{ font-size:.9875rem; line-height:1.7; color:var(--ink); flex:1 } .quote-card blockquote::before{ content:"“"; color:var(--brand-orange); font-size:1.4em; line-height:0; margin-right:.1em } .quote-card blockquote::after{ content:"”"; color:var(--brand-orange); font-size:1.4em; line-height:0; margin-left:.1em } .quote-card cite{ font-style:normal; display:flex; flex-direction:column; gap:.15rem } .quote-card cite b{ font-size:.9375rem } .quote-card cite span{ font-size:.8125rem; color:var(--muted) } /* ============================================================ Stats bands ============================================================ */ .stats-band{ max-width:var(--container-shell); margin-inline:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; } .stats-band .cell .value{ font-size:2.75rem; font-weight:700; letter-spacing:-.02em; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums; } .stats-band .cell p{ margin-top:.4rem; font-size:.875rem; color:var(--muted) } .roas-strip{ border-top:1px solid var(--card-border); padding:2.5rem 2rem; text-align:center; font-size:1rem; color:var(--muted); } .roas-strip b{ font-size:1.75rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; } .roas-strip .accent{ background:var(--grad-cta); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ============================================================ Why / values icon blocks ============================================================ */ .why-block{ display:flex; flex-direction:column; gap:.75rem } .why-block .icon-disc{ width:3rem; height:3rem; border-radius:.9rem; display:grid; place-items:center; background:linear-gradient(135deg, rgba(245,130,31,.16), rgba(27,94,110,.16)); color:var(--brand-teal); box-shadow:inset 0 1px 0 rgba(255,255,255,.7); } .why-block .icon-disc svg{ width:1.4rem; height:1.4rem } .why-block h3{ font-size:1.125rem; font-weight:700; letter-spacing:-.01em } .why-block p{ font-size:.875rem; color:var(--muted); line-height:1.6 } /* ============================================================ CTA bands ============================================================ */ .cta-band{ padding:6rem 2rem; text-align:center; position:relative; overflow:hidden; } .cta-band .inner{ max-width:46rem; margin-inline:auto; position:relative; z-index:2 } .cta-band h2{ font-size:2.5rem; font-weight:700; letter-spacing:-.02em; line-height:1.12 } .cta-band p{ margin-top:1.25rem; color:var(--muted); line-height:1.7 } .contact-chips{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:1.75rem; } .contact-chip{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:.1rem; border-radius:var(--radius-card); padding:.75rem 1.25rem; transition:transform .3s var(--ease-out), border-color .3s var(--ease-out); text-align:left; } .contact-chip:hover{ transform:translateY(-4px); border-color:rgba(245,130,31,.45) } .contact-chip b{ font-size:.875rem } .contact-chip span{ font-size:.8125rem; color:var(--brand-orange-deep); font-weight:500 } /* ============================================================ Static page heroes ============================================================ */ .page-hero{ position:relative; padding:11rem 2rem 5rem; text-align:center; overflow:hidden; } .page-hero .hero-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center } .page-hero h1{ max-width:20ch; font-size:3rem; font-weight:700; letter-spacing:-.02em; line-height:1.1; margin-top:1.5rem; } .page-hero .subhead{ max-width:46ch; margin-top:1.5rem; font-size:1.0625rem; color:var(--muted); line-height:1.6; } /* ============================================================ Contact page ============================================================ */ .contact-grid{ max-width:var(--container-shell); margin-inline:auto; display:grid; grid-template-columns:1fr 1.2fr; gap:3rem; align-items:start; } .contact-info{ display:flex; flex-direction:column; gap:1.25rem } .info-card{ border-radius:var(--radius-card); padding:1.5rem } .info-card h3{ font-family:var(--font-mono); font-size:.6875rem; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin-bottom:.85rem; } .info-card a{ color:var(--brand-teal); font-weight:500; transition:color .25s } .info-card a:hover{ color:var(--brand-orange) } .info-card p{ font-size:.9375rem; color:var(--muted); line-height:1.6 } .info-card .contact-chip{ width:100%; border:1px solid var(--card-border); background:rgba(255,255,255,.7) } .info-card .chip-stack{ gap:.6rem } .contact-form{ border-radius:1.25rem; padding:2rem; display:flex; flex-direction:column; gap:1.1rem; } .field label{ display:block; font-size:.8125rem; font-weight:600; margin-bottom:.4rem } .field input, .field textarea, .field select{ width:100%; font:inherit; color:var(--ink); background:rgba(244,248,250,.85); border:1px solid var(--card-border); border-radius:.75rem; padding:.8rem 1rem; transition:border-color .25s var(--ease-out), background .25s var(--ease-out), box-shadow .25s var(--ease-out); } .field textarea{ min-height:8rem; resize:vertical } .field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--brand-orange); background:#fff; box-shadow:0 0 0 3px rgba(245,130,31,.16); } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem } /* ============================================================ Footer — dark teal anchor band ============================================================ */ .site-footer{ background:linear-gradient(180deg,#11414f 0%, #0d3541 100%); color:#fff; padding:4rem 2rem 2rem; position:relative; z-index:2; } .footer-cols{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem } .footer-brand .wordmark{ margin-bottom:1rem } .footer-brand p{ font-size:.875rem; color:rgba(255,255,255,.6); max-width:26ch; line-height:1.6 } .footer-col h4{ font-family:var(--font-mono); font-size:.6875rem; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.45); margin-bottom:1rem; } .footer-col li{ margin-bottom:.6rem } .footer-col a{ font-size:.875rem; color:rgba(255,255,255,.65); transition:color .25s var(--ease-out), transform .25s var(--ease-out); display:inline-block; } .footer-col a:hover{ color:var(--brand-orange-soft); transform:translateX(4px) } .footer-social{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1.25rem } .footer-social a{ border:1px solid rgba(255,255,255,.2); border-radius:var(--radius-pill); padding:.4rem 1rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.65); transition:background .25s var(--ease-out), transform .25s var(--ease-out), color .25s var(--ease-out); } .footer-social a:hover{ background:rgba(245,130,31,.18); transform:scale(1.04); color:#fff } .legal-bar{ border-top:1px solid rgba(255,255,255,.12); margin-top:3rem; padding-top:1.5rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.75rem; color:rgba(255,255,255,.45); } .legal-bar a{ transition:color .25s } .legal-bar a:hover{ color:var(--brand-orange-soft) } .legal-links{ display:flex; gap:1.25rem } /* ============================================================ Menu overlay — light glass ============================================================ */ .menu-overlay{ position:fixed; inset:0; z-index:200; background:rgba(255,255,255,.94); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); color:var(--ink); display:flex; flex-direction:column; opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .35s; } .menu-overlay.open{ opacity:1; visibility:visible; transition:opacity .35s ease; } .menu-topbar{ padding:1.5rem 2rem; display:flex; align-items:center; justify-content:space-between; } .menu-close{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--card-border); border-radius:var(--radius-pill); padding:.5rem 1.25rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; transition:background .25s var(--ease-out), transform .25s var(--ease-out); } .menu-close:hover{ background:rgba(27,94,110,.07); transform:scale(1.04) } .menu-close svg{ width:.875rem; height:.875rem } .menu-nav{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:0 2rem; } .menu-nav ul{ max-width:var(--container-shell); width:100%; margin-inline:auto } .menu-nav li{ border-top:1px solid var(--card-border); opacity:0; transform:translateY(1rem); transition:opacity .5s var(--ease-reveal), transform .5s var(--ease-reveal); } .menu-nav li:first-child{ border-top:none } .menu-overlay.open .menu-nav li{ opacity:1; transform:none } .menu-nav a{ display:flex; align-items:baseline; gap:1.5rem; padding-block:.5rem; font-size:3rem; font-weight:700; letter-spacing:-.02em; color:var(--muted); transition:color .3s var(--ease-out); } .menu-nav a:hover, .menu-nav a:focus-visible{ color:var(--brand-teal) } .menu-nav .idx{ font-family:var(--font-mono); font-size:.8125rem; font-weight:400; color:var(--faint); transition:color .3s var(--ease-out); } .menu-nav a:hover .idx, .menu-nav a:focus-visible .idx{ color:var(--brand-orange) } .menu-bottombar{ border-top:1px solid var(--card-border); padding:1.5rem 2rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.75rem; color:var(--faint); } .menu-bottombar .socials{ display:flex; gap:1.5rem } .menu-bottombar a{ display:inline-block; transition:transform .25s var(--ease-out), color .25s var(--ease-out) } .menu-bottombar a:hover{ transform:translateX(4px); color:var(--brand-orange-deep) } /* ============================================================ Responsive ============================================================ */ @media (max-width:1024px){ .phone-link{ display:none } .about-teaser{ grid-template-columns:1fr; gap:2rem } .cols-3{ grid-template-columns:repeat(2,1fr) } .cols-4{ grid-template-columns:repeat(2,1fr) } .stats-band{ grid-template-columns:repeat(2,1fr) } .contact-grid{ grid-template-columns:1fr } .svc3d-stage{ row-gap:4rem } } @media (max-width:768px){ .nav-center{ display:none } .hamburger{ display:grid } .header-cta .btn{ display:none } .hero h1{ font-size:2.5rem } .page-hero h1{ font-size:2.25rem } .section-head-row h2, .cta-band h2{ font-size:1.875rem } .svc3d-stage{ grid-template-columns:1fr; row-gap:2rem } .cols-2, .cols-3, .cols-4{ grid-template-columns:1fr } .footer-cols{ grid-template-columns:1fr 1fr; gap:2rem } .menu-nav a{ font-size:2rem } .form-row{ grid-template-columns:1fr } .orb{ filter:blur(40px); opacity:.45 } } @media (max-width:640px){ .stats-band{ grid-template-columns:1fr } .footer-cols{ grid-template-columns:1fr } .revenue-ticker{ font-size:.6875rem } } @media (max-width:480px){ .glass-header{ left:.75rem; right:.75rem } } @media (hover:none){ .svc-card{ --pointer-x:0; --pointer-y:0 } } /* ============================================================ Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } html{ scroll-behavior:auto } html.js body{ opacity:1; transform:none } html.js [data-reveal], html.js .lines .line > span, .menu-nav li{ opacity:1 !important; transform:none !important } .float-wrap, .orb{ animation:none !important } }