/* ============================================================ QUANTUM PIXEL — Liquid Obsidian Single-file premium marketing site ============================================================ */ :root{ /* Client palette */ --ink:#0C1519; /* Chinese Black - base background */ --abyss:#162127; /* Dark Jungle Green - surfaces */ --jet:#3A3534; /* Jet - elevated / borders */ --coffee:#724B39; /* Coffee - secondary accent */ --brass:#CF9D7B; /* Antique Brass - primary accent */ /* Derived tones */ --champagne:#EBCFAE; /* light brass highlight */ --brass-deep:#A9744E; /* deep brass */ --text:#F2E9DF; /* warm off-white */ --muted:#A99C8E; /* muted warm grey */ --muted-2:#7E7264; /* fainter */ /* Glass + lines */ --glass:rgba(22,33,39,.55); --glass-2:rgba(12,21,25,.6); --line:rgba(207,157,123,.16); --line-soft:rgba(207,157,123,.09); --halo:rgba(207,157,123,.30); /* Page frame — shared by every page so the framing is identical site-wide */ --frame-warm:#6F4E37; /* coffee — warm outer edge of the frame (≈ --coffee) */ --frame-deep:#070C0F; /* obsidian — the deep body of the frame */ /* Gradients */ --grad-brass:linear-gradient(135deg,#EBCFAE 0%,#CF9D7B 42%,#A9744E 100%); --grad-text:linear-gradient(120deg,#F2E9DF 0%,#EBCFAE 35%,#CF9D7B 70%,#A9744E 100%); /* Type */ --f-display:'Cinzel', Georgia, serif; --f-sans:'Sora', system-ui, sans-serif; --f-mono:'JetBrains Mono', ui-monospace, monospace; /* Motion */ --ease:cubic-bezier(.22,.61,.36,1); --ease-soft:cubic-bezier(.4,0,.2,1); /* Z scale */ --z-bg:0; --z-grain:1; --z-content:10; --z-nav:50; --z-cursor:60; --z-overlay:90; --maxw:1200px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:auto;-webkit-text-size-adjust:100%} /* JS handles all smooth scrolling; CSS smooth would fight the per-frame pager */ @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ font-family:var(--f-sans); /* lifted base: a cool teal dawn at the top settling into the obsidian ink — keeps the dark, just opens it up */ background:linear-gradient(168deg,#17282F 0%,#101D23 22%,var(--ink) 58%,var(--ink) 100%); color:var(--text); line-height:1.65; font-weight:300; overflow-x:hidden; position:relative; min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* ---------- Atmosphere: aurora + grid + grain ---------- */ .bg-layer{position:fixed;inset:0;z-index:var(--z-bg);pointer-events:none;overflow:hidden} .aurora{position:absolute;border-radius:50%;filter:blur(48px);opacity:.55;will-change:transform} .aurora.a1{width:46vw;height:46vw;left:-10vw;top:-8vw;background:radial-gradient(circle at 30% 30%,rgba(114,75,57,.55),transparent 70%);animation:drift1 26s var(--ease-soft) infinite alternate} .aurora.a2{width:40vw;height:40vw;right:-12vw;top:14vh;background:radial-gradient(circle at 60% 40%,rgba(207,157,123,.30),transparent 70%);animation:drift2 32s var(--ease-soft) infinite alternate} .aurora.a3{width:38vw;height:38vw;left:24vw;bottom:-16vw;background:radial-gradient(circle at 50% 50%,rgba(22,33,39,.4),rgba(114,75,57,.28),transparent 72%);animation:drift3 30s var(--ease-soft) infinite alternate} @keyframes drift1{to{transform:translate(8vw,6vh) scale(1.12)}} @keyframes drift2{to{transform:translate(-6vw,8vh) scale(1.08)}} @keyframes drift3{to{transform:translate(5vw,-6vh) scale(1.15)}} /* premium lighter layers — cool "moonlight" + champagne, plus a soft ambient wash, to open up the dark */ .aurora.a4{width:44vw;height:44vw;right:-10vw;bottom:-10vw;opacity:.72;filter:blur(58px); background:radial-gradient(circle at 50% 50%,rgba(140,172,190,.26),transparent 70%);animation:drift2 34s var(--ease-soft) infinite alternate} .aurora.a5{width:34vw;height:34vw;left:30vw;top:26vh;opacity:.66;filter:blur(56px); background:radial-gradient(circle at 50% 50%,rgba(235,207,174,.18),transparent 70%);animation:drift1 28s var(--ease-soft) infinite alternate} .bg-layer::before{content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(ellipse 96% 58% at 50% -8%,rgba(140,172,190,.12),transparent 58%), radial-gradient(ellipse 66% 52% at 86% 4%,rgba(235,207,174,.07),transparent 60%), radial-gradient(ellipse 80% 60% at 50% 116%,rgba(207,157,123,.06),transparent 60%)} .grid-lines{position:absolute;inset:0; background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 30%,transparent 80%); -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 30%,transparent 80%); opacity:.5} .grain{position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.05;mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .vignette{position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none; background:radial-gradient(ellipse 132% 112% at 50% -2%,transparent 66%,rgba(7,12,15,.32) 100%)} /* deep-obsidian edge frame: brings the original dark back to the very edges so the lifted centre feels intentionally framed. Sits behind content, so it only deepens the background + outer glass. */ .edge-frame{position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none; /* The very edge STARTS as bold coffee (with the dark showing through), then gradually transforms into the original obsidian dark, then fades to the luminous centre. Fallback (literal rgba) first so every browser gets a correct frame... */ background: linear-gradient(90deg,rgba(111,78,55,.07) 0%,rgba(111,78,55,.02) 3%,transparent 10%,transparent 90%,rgba(111,78,55,.02) 97%,rgba(111,78,55,.07) 100%), linear-gradient(180deg,transparent 80%,rgba(7,12,15,.05) 100%); /* ...then the token-driven version (design-system source of truth) for modern browsers. */ background: linear-gradient(90deg, color-mix(in srgb,var(--frame-warm) 7%,transparent) 0%, color-mix(in srgb,var(--frame-warm) 2%,transparent) 3%, transparent 10%,transparent 90%, color-mix(in srgb,var(--frame-warm) 2%,transparent) 97%, color-mix(in srgb,var(--frame-warm) 7%,transparent) 100%), linear-gradient(180deg,transparent 80%,color-mix(in srgb,var(--frame-deep) 5%,transparent) 100%)} /* ---------- Engineering dot-grid texture (physical surface) ---------- Precision dot grid at 24px intervals with structural axis lines every 120px (5 dots) — like the ruled face of an engineering notepad or PCB layout board. position:absolute so it scrolls with the content like a real printed surface; fully static, matte: no blur, no shadow, no light. */ .etch-layer{position:absolute;inset:0;z-index:var(--z-bg);pointer-events:none; background-image: /* structural axis lines every 120px (5 × 24px module) */ linear-gradient(rgba(207,157,123,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(207,157,123,.07) 1px,transparent 1px), /* fine dot grid at 24px */ radial-gradient(circle,rgba(207,157,123,.18) 1px,transparent 1px); background-size:120px 120px,120px 120px,24px 24px} /* homepage: the hero keeps its own composition — texture begins below it */ .etch-layer.below-hero{top:100vh} /* ---------- Cursor glow ---------- */ .cursor-glow{position:fixed;top:0;left:0;width:480px;height:480px;border-radius:50%; background:radial-gradient(circle,rgba(207,157,123,.18),transparent 65%); transform:translate(-50%,-50%);pointer-events:none;z-index:var(--z-cursor); transition:opacity .4s;opacity:0;will-change:transform} /* build page: elegant arrival particles (champagne/brass embers drifting up) */ #celebrate{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:45} /* ---------- Scroll progress ---------- */ .progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:var(--z-overlay); background:var(--grad-brass);box-shadow:0 0 12px var(--halo)} /* ---------- Layout helpers ---------- */ .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:var(--z-content)} section{position:relative;padding:120px 0} .eyebrow{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.32em;text-transform:uppercase; color:var(--brass);display:inline-flex;align-items:center;gap:.7em;font-weight:500} .eyebrow::before{content:"";width:28px;height:1px;background:var(--grad-brass);display:inline-block} .section-head{max-width:760px;margin-bottom:64px} .section-head h2{font-family:var(--f-display);font-weight:600;line-height:1.08;letter-spacing:.01em; font-size:clamp(2.1rem,5vw,3.6rem);margin:22px 0 18px} .section-head p{color:var(--muted);font-size:clamp(1rem,1.4vw,1.12rem);max-width:60ch;font-weight:300} .brass-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent} /* ---------- Buttons ---------- */ .btn{font-family:var(--f-sans);font-weight:500;font-size:.95rem;letter-spacing:.01em; display:inline-flex;align-items:center;justify-content:center;gap:.6em; padding:15px 28px;border-radius:50px;cursor:pointer;border:1px solid transparent; text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s,color .35s,border-color .35s; position:relative;white-space:nowrap;min-height:48px} .btn svg{width:18px;height:18px} .btn-primary{background:var(--grad-brass);color:#1a120b;box-shadow:0 8px 30px -8px rgba(207,157,123,.5),inset 0 1px 0 rgba(255,255,255,.35)} .btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 44px -10px rgba(207,157,123,.7),inset 0 1px 0 rgba(255,255,255,.5)} .btn-ghost{background:rgba(242,233,223,.03);color:var(--text);border-color:var(--line)} .btn-ghost:hover{transform:translateY(-3px);border-color:var(--brass);background:rgba(207,157,123,.08);box-shadow:0 12px 30px -12px rgba(0,0,0,.6)} .btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px} /* ---------- Glass card base ---------- */ .glass{background:var(--glass);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%); border:1px solid var(--line);border-radius:20px;position:relative;overflow:hidden} .glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(140deg,rgba(255,255,255,.06),transparent 38%)} /* ============================================================ NAV ============================================================ */ .nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:var(--z-nav); width:calc(100% - 40px);max-width:var(--maxw); display:flex;align-items:center;justify-content:space-between;gap:20px; padding:12px 14px 12px 22px;border-radius:60px; background:rgba(12,21,25,.45);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%); border:1px solid var(--line-soft);transition:padding .4s var(--ease),background .4s,border-color .4s,box-shadow .4s,top .4s} .nav.scrolled{top:10px;background:rgba(12,21,25,.8);border-color:var(--line);box-shadow:0 18px 50px -20px rgba(0,0,0,.7)} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);flex-shrink:0} .brand .mark{width:32px;height:32px;flex-shrink:0} /* Animated mark — gentle gyroscope rotation around the core (orbits + particles spin as one) */ @keyframes qp-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} .mark .qp-spin{transform-box:view-box;transform-origin:32px 32px;animation:qp-spin 24s linear infinite} @media (prefers-reduced-motion:reduce){.mark .qp-spin{animation:none}} /* ============================================================ OWNERSHIP & HANDOFF ============================================================ */ .handoff{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:8px;max-width:780px;margin-left:auto;margin-right:auto} .handoff-card{padding:38px 30px;display:flex;flex-direction:column} .handoff-card .ic{width:54px;height:54px;border-radius:15px;flex-shrink:0;display:flex;align-items:center;justify-content:center; background:rgba(207,157,123,.08);border:1px solid var(--line);color:var(--brass);margin-bottom:22px} .handoff-card .ic svg{width:25px;height:25px} .handoff-card .tag{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px} .handoff-card h3{font-family:var(--f-display);font-weight:600;font-size:1.3rem;color:var(--text);margin-bottom:12px;line-height:1.22} .handoff-card p{color:var(--muted);font-size:.97rem;font-weight:300;line-height:1.65} .handoff-card.featured{border-color:rgba(207,157,123,.42); box-shadow:0 0 0 1px rgba(207,157,123,.12),0 26px 64px -30px rgba(207,157,123,.32)} .handoff-card.featured .ic{background:var(--grad-brass);color:#1a120b;border-color:transparent} .handoff-card .badge{align-self:flex-start;background:var(--grad-brass);color:#1a120b;font-family:var(--f-mono); font-size:.56rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:30px;margin-bottom:18px} .handoff-note{text-align:center;color:var(--muted-2);font-size:.94rem;font-weight:300;margin-top:32px;max-width:60ch;margin-left:auto;margin-right:auto} .handoff-note b{color:var(--brass);font-weight:500} .handoff-note a{color:var(--brass);font-weight:500;text-decoration:underline;text-underline-offset:3px; text-decoration-color:rgba(207,157,123,.45);transition:text-decoration-color .3s} .handoff-note a:hover{text-decoration-color:var(--brass)} @media (max-width:880px){.handoff{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}} .brand .name{font-family:var(--f-display);font-weight:700;font-size:1.04rem;letter-spacing:.14em;text-transform:uppercase} .brand .name b{color:var(--brass);font-weight:700} .nav-links{display:flex;align-items:center;gap:6px} .nav-links a{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:400;padding:9px 15px;border-radius:30px; transition:color .3s,background .3s;position:relative} .nav-links a:hover{color:var(--text);background:rgba(207,157,123,.07)} .nav-cta{display:flex;align-items:center;gap:10px} .nav-tel{display:none} .menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:12px;width:46px;height:46px; cursor:pointer;color:var(--text);align-items:center;justify-content:center} .menu-btn svg{width:22px;height:22px} /* Mobile menu */ .mobile-menu{position:fixed;inset:0;z-index:45;background:rgba(8,14,16,.92); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px; padding:88px 20px 40px; /* top clears the nav oval; bottom gives breathing room */ overflow-y:auto;-webkit-overflow-scrolling:touch; /* scrollable so nothing is ever clipped */ opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s} .mobile-menu.open{opacity:1;visibility:visible} .mobile-menu a{font-family:var(--f-display);font-size:clamp(1.1rem,5vh,1.5rem);color:var(--text);text-decoration:none; padding:clamp(8px,1.6vh,14px) 24px;width:100%;text-align:center; letter-spacing:.04em;transition:color .3s;transform:translateY(14px);opacity:0} .mobile-menu.open a{transform:translateY(0);opacity:1;transition:color .3s,transform .5s var(--ease),opacity .5s} .mobile-menu a:hover{color:var(--brass)} .mobile-menu .btn{margin-top:12px;width:100%;max-width:280px} /* ============================================================ HERO ============================================================ */ .hero{min-height:100vh;display:flex;align-items:center;padding-top:140px;padding-bottom:80px;overflow:hidden;position:relative} #dotgrid{position:absolute;inset:0;z-index:2;opacity:.9} /* Flowing background paths */ .hero-paths{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;color:var(--brass); -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 42%,#000 32%,transparent 88%); mask-image:radial-gradient(ellipse 90% 80% at 50% 42%,#000 32%,transparent 88%)} .hero-paths svg{position:absolute;width:170%;height:170%;left:-35%;top:-35%;display:block} .hero-paths path{fill:none;stroke:currentColor;stroke-linecap:round;opacity:var(--o1)} .hero-paths svg{will-change:transform;transform-origin:50% 50%;transform-box:view-box;-webkit-backface-visibility:hidden;backface-visibility:hidden} .hero-paths svg.s1{animation:heroSpinA 70s linear infinite} .hero-paths svg.s2{animation:heroSpinB 88s linear infinite} @keyframes heroSpinA{to{transform:rotate(360deg)}} @keyframes heroSpinB{to{transform:rotate(-360deg)}} .hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center} .hero-copy{max-width:660px} .hero h1{font-family:var(--f-display);font-weight:700;line-height:1.02;letter-spacing:.005em; font-size:clamp(2.7rem,6.6vw,5rem);margin:26px 0 24px;text-transform:uppercase} .hero h1 .line{display:block;overflow:hidden} .hero h1 .line>span{display:block} .hero p.sub{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--muted);max-width:54ch;font-weight:300;margin-bottom:36px} .hero p.sub b{color:var(--text);font-weight:500} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:46px} .hero-stats{display:flex;gap:34px;flex-wrap:wrap;padding-top:30px;border-top:1px solid var(--line-soft)} .stat .num{font-family:var(--f-display);font-weight:600;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--text);line-height:1} .stat .num b{color:var(--brass);font-weight:600} .stat .lbl{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-top:8px} /* Hero floating mock */ .hero-visual{position:relative;height:440px} .mock{position:absolute;border-radius:16px;overflow:hidden; box-shadow:0 40px 80px -30px rgba(0,0,0,.8);will-change:transform} .mock-main{inset:0;} .mock-bar{height:34px;background:rgba(12,21,25,.95);display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--line-soft)} .mock-bar i{width:9px;height:9px;border-radius:50%;background:#2c3a40;display:block} .mock-bar i:nth-child(1){background:#5a3f33} .mock-bar i:nth-child(2){background:#7a5a3c} .mock-bar i:nth-child(3){background:#3a5040} .mock-bar .url{margin-left:10px;font-family:var(--f-mono);font-size:.62rem;color:var(--muted-2); background:rgba(207,157,123,.06);border:1px solid var(--line-soft);border-radius:20px;padding:3px 12px;letter-spacing:.05em} .mock-body{position:absolute;inset:34px 0 0 0;background: radial-gradient(circle at 80% 0%,rgba(114,75,57,.5),transparent 55%), linear-gradient(160deg,#101c21,#0a1216)} .mock-hero{padding:26px 22px} .mb-ey{font-family:var(--f-mono);font-size:.5rem;letter-spacing:.3em;color:var(--brass);text-transform:uppercase} .mb-h{font-family:var(--f-display);font-weight:600;font-size:1.5rem;line-height:1.1;margin:10px 0;color:var(--text)} .mb-h em{font-style:normal;color:var(--brass)} .mb-line{height:7px;border-radius:6px;background:rgba(242,233,223,.1);margin:7px 0} .mb-line.s{width:70%}.mb-line.xs{width:45%} .mb-btn{margin-top:16px;display:inline-block;height:26px;width:96px;border-radius:30px;background:var(--grad-brass)} .mb-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px} .mb-card{height:54px;border-radius:9px;border:1px solid var(--line-soft);background:rgba(207,157,123,.05)} .mock-float{width:150px;right:-26px;bottom:-22px;z-index:3;padding:14px;background:rgba(18,28,32,.85)} .mock-float .mf-row{display:flex;align-items:center;gap:9px;margin-bottom:9px} .mock-float .dot{width:30px;height:30px;border-radius:9px;background:var(--grad-brass);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#1a120b} .mock-float .dot svg{width:16px;height:16px} .mock-float .mf-n{font-family:var(--f-display);font-size:1.05rem;color:var(--text);font-weight:600;line-height:1} .mock-float .mf-l{font-family:var(--f-mono);font-size:.54rem;letter-spacing:.12em;color:var(--muted-2);text-transform:uppercase;margin-top:3px} .mock-float .mf-bar{height:5px;border-radius:4px;background:rgba(242,233,223,.08);overflow:hidden} .mock-float .mf-bar span{display:block;height:100%;width:84%;background:var(--grad-brass);border-radius:4px} .scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:5; font-family:var(--f-mono);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2); display:none;flex-direction:column;align-items:center;gap:10px} /* removed: was overlapping the hero stats */ .scroll-hint .bar{width:1px;height:40px;background:linear-gradient(var(--brass),transparent);animation:scrolldn 2s var(--ease-soft) infinite} @keyframes scrolldn{0%{transform:scaleY(.2);transform-origin:top;opacity:0}40%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}} /* ============================================================ MARQUEE / TRUST ============================================================ */ .trust{padding:54px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft); background:rgba(12,21,25,.3)} .trust .lead{text-align:center;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted-2);margin-bottom:30px} .marquee{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .marquee-track{display:flex;gap:64px;padding-right:64px;animation:marq 36s linear infinite;flex-shrink:0} .marquee:hover .marquee-track{animation-play-state:paused} .marquee-item{font-family:var(--f-display);font-weight:600;font-size:1.35rem;letter-spacing:.06em;color:var(--muted); white-space:nowrap;display:flex;align-items:center;gap:12px;opacity:.7;transition:opacity .3s,color .3s} .marquee-item:hover{opacity:1;color:var(--brass)} .marquee-item::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass);opacity:.5} @keyframes marq{to{transform:translateX(-50%)}} /* ============================================================ STORY / ABOUT ============================================================ */ .story .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .story-text h2{font-family:var(--f-display);font-weight:600;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.12;margin:22px 0 24px} .story-text p{color:var(--muted);margin-bottom:18px;font-weight:300} .story-text p b{color:var(--text);font-weight:500} .story-values{display:flex;flex-direction:column;gap:14px;margin-top:34px} .value{display:flex;gap:16px;align-items:flex-start} .value .ic{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center; background:rgba(207,157,123,.08);border:1px solid var(--line);color:var(--brass)} .value .ic svg{width:20px;height:20px} .value h4{font-family:var(--f-sans);font-weight:600;font-size:1rem;margin-bottom:3px} .value p{font-size:.9rem;color:var(--muted);margin:0} .story-panel{position:relative;padding:38px;min-height:420px;display:flex;flex-direction:column;justify-content:space-between} .story-panel .big-num{font-family:var(--f-display);font-weight:700;font-size:clamp(3rem,7vw,5rem);line-height:1; background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent} .story-panel .big-lbl{font-size:1rem;color:var(--muted);margin-top:8px;max-width:30ch} .panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px} .panel-grid .pg{padding-top:22px;border-top:1px solid var(--line-soft)} .panel-grid .pg .n{font-family:var(--f-display);font-size:1.7rem;color:var(--text);font-weight:600} .panel-grid .pg .n b{color:var(--brass)} .panel-grid .pg .l{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-top:6px} .panel-badge{position:absolute;top:28px;right:28px;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em; text-transform:uppercase;color:var(--brass);border:1px solid var(--line);border-radius:30px;padding:6px 14px; display:flex;align-items:center;gap:7px} .panel-badge .pulse{width:7px;height:7px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 0 var(--halo);animation:pulse 2.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(207,157,123,.5)}70%{box-shadow:0 0 0 10px rgba(207,157,123,0)}100%{box-shadow:0 0 0 0 rgba(207,157,123,0)}} /* ============================================================ SERVICES (bento) ============================================================ */ .bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .card{padding:32px;display:flex;flex-direction:column;gap:14px;cursor:default; transition:transform .5s var(--ease),border-color .5s,box-shadow .5s;will-change:transform} .card .ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center; background:rgba(207,157,123,.08);border:1px solid var(--line);color:var(--brass);transition:background .4s,color .4s} .card .ic svg{width:24px;height:24px} .card h3{font-family:var(--f-display);font-weight:600;font-size:1.3rem;letter-spacing:.01em} .card p{color:var(--muted);font-size:.94rem;font-weight:300} .card .tag{margin-top:auto;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)} .card::after{content:"";position:absolute;width:280px;height:280px;border-radius:50%; background:radial-gradient(circle,rgba(207,157,123,.14),transparent 65%); top:var(--my,50%);left:var(--mx,50%);transform:translate(-50%,-50%);opacity:0;transition:opacity .5s;pointer-events:none} .card:hover{transform:translateY(-6px);border-color:var(--line);box-shadow:0 30px 60px -28px rgba(0,0,0,.8)} .card:hover::after{opacity:1} .card:hover .ic{background:var(--grad-brass);color:#1a120b} .card.wide{grid-column:span 2} /* ============================================================ PROCESS ============================================================ */ .process{position:relative} #procdots{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none} .process .section-head{margin-bottom:clamp(150px,15vw,210px)} /* clean band that hosts the PREMIUM constellation */ .proc-banner{margin-top:56px;padding:34px 40px;border-radius:22px;display:flex;align-items:center;gap:24px;flex-wrap:wrap; justify-content:space-between;background: radial-gradient(circle at 100% 0%,rgba(114,75,57,.4),transparent 50%), linear-gradient(120deg,rgba(207,157,123,.1),rgba(22,33,39,.4)); border:1px solid var(--line)} .proc-banner .pb-text{display:flex;flex-direction:column;gap:6px} .proc-banner h3{font-family:var(--f-display);font-weight:600;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.1} .proc-banner p{color:var(--muted);font-size:.96rem} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative} .step{padding:30px 26px;display:flex;flex-direction:column;gap:14px;position:relative; transition:transform .5s var(--ease),border-color .5s,background .5s} .step:hover{transform:translateY(-6px);border-color:var(--line)} .step .sn{font-family:var(--f-display);font-weight:700;font-size:2.6rem;line-height:1; background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.85} .step .sic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center; background:rgba(207,157,123,.08);border:1px solid var(--line);color:var(--brass)} .step .sic svg{width:21px;height:21px} .step h4{font-family:var(--f-display);font-weight:600;font-size:1.18rem} .step p{color:var(--muted);font-size:.9rem;font-weight:300} .step .free{align-self:flex-start;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase; color:var(--brass);border:1px solid var(--line);border-radius:20px;padding:4px 10px} /* ============================================================ WORK / PORTFOLIO ============================================================ */ .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .proj{border-radius:18px;overflow:hidden;position:relative;cursor:pointer; border:1px solid var(--line-soft);transition:transform .5s var(--ease),border-color .5s,box-shadow .5s} .proj:hover{transform:translateY(-6px);border-color:var(--brass);box-shadow:0 30px 60px -30px rgba(0,0,0,.85)} .proj .thumb{height:200px;position:relative;overflow:hidden;display:flex;flex-direction:column} .proj .pbar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:rgba(8,14,16,.7);border-bottom:1px solid var(--line-soft)} .proj .pbar i{width:7px;height:7px;border-radius:50%;background:rgba(242,233,223,.2)} .proj .pbar .u{margin-left:8px;font-family:var(--f-mono);font-size:.56rem;color:var(--muted-2);letter-spacing:.04em} .proj .canvas{flex:1;position:relative;padding:20px;display:flex;flex-direction:column;justify-content:center;gap:9px} .proj .canvas .ph{font-family:var(--f-display);font-weight:600;font-size:1.35rem;color:var(--text);line-height:1.05;position:relative;z-index:2} .proj .canvas .pl{height:6px;border-radius:5px;background:rgba(242,233,223,.12);position:relative;z-index:2} .proj .canvas .pl.s{width:64%}.proj .canvas .pl.xs{width:40%} .proj .canvas .pchip{margin-top:6px;height:22px;width:80px;border-radius:20px;background:var(--grad-brass);position:relative;z-index:2} .proj .meta{padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(12,21,25,.5)} .proj .meta .mn{font-family:var(--f-sans);font-weight:600;font-size:1rem} .proj .meta .mc{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-top:2px} .proj .meta .res{font-family:var(--f-mono);font-size:.72rem;color:var(--brass);text-align:right;font-weight:500;white-space:nowrap} .proj .view{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:rgba(8,14,16,.55);opacity:0;transition:opacity .4s;z-index:5} .proj:hover .view{opacity:1} .proj .view span{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text); border:1px solid var(--brass);border-radius:30px;padding:11px 22px;display:flex;align-items:center;gap:9px;background:rgba(12,21,25,.6)} .proj .view span svg{width:15px;height:15px} /* project palettes */ .t-emerald{background:radial-gradient(circle at 70% 10%,rgba(58,80,64,.6),transparent 60%),linear-gradient(160deg,#0e1a18,#0a1413)} .t-brass{background:radial-gradient(circle at 30% 10%,rgba(207,157,123,.4),transparent 60%),linear-gradient(160deg,#1a130d,#0d0a07)} .t-coffee{background:radial-gradient(circle at 80% 90%,rgba(114,75,57,.6),transparent 60%),linear-gradient(160deg,#16100c,#0c0907)} .t-steel{background:radial-gradient(circle at 20% 20%,rgba(58,53,52,.8),transparent 60%),linear-gradient(160deg,#15191b,#0b0e10)} .t-jungle{background:radial-gradient(circle at 60% 0%,rgba(22,33,39,1),rgba(58,80,64,.5),transparent 70%),linear-gradient(160deg,#0e1619,#080d0f)} .t-warm{background:radial-gradient(circle at 40% 100%,rgba(168,116,78,.5),transparent 55%),linear-gradient(160deg,#191009,#0d0805)} /* ============================================================ TESTIMONIALS ============================================================ */ .tcols{columns:3;column-gap:22px} .tcard{break-inside:avoid;margin-bottom:22px;padding:30px;display:flex;flex-direction:column;gap:18px} .tcard .stars{display:flex;gap:3px;color:var(--brass)} .tcard .stars svg{width:16px;height:16px} .tcard .quote{font-size:1rem;color:var(--text);font-weight:300;line-height:1.7;font-style:normal} .tcard .quote::before{content:"\201C";font-family:var(--f-display);color:var(--brass);font-size:2.4rem;line-height:0; vertical-align:-.35em;margin-right:.1em;opacity:.6} .tcard .who{display:flex;align-items:center;gap:13px;margin-top:auto} .tcard .av{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center; font-family:var(--f-display);font-weight:600;font-size:1.05rem;color:#1a120b;background:var(--grad-brass)} .tcard .who .nm{font-weight:600;font-size:.94rem} .tcard .who .rl{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-top:2px} /* ============================================================ FAQ ============================================================ */ .faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start} .faq-list{display:flex;flex-direction:column;gap:0} .faq-item{border-bottom:1px solid var(--line-soft)} .faq-q{width:100%;background:none;border:none;cursor:pointer;text-align:left;color:var(--text); font-family:var(--f-sans);font-weight:500;font-size:1.08rem;padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:20px} .faq-q .pm{width:30px;height:30px;flex-shrink:0;border-radius:50%;border:1px solid var(--line); display:flex;align-items:center;justify-content:center;color:var(--brass);transition:transform .4s var(--ease),background .4s} .faq-q .pm svg{width:15px;height:15px;transition:transform .4s var(--ease)} .faq-item.open .pm{background:var(--grad-brass);color:#1a120b} .faq-item.open .pm svg{transform:rotate(45deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)} .faq-a p{color:var(--muted);font-weight:300;padding-bottom:24px;max-width:62ch} /* ============================================================ CTA / CONTACT ============================================================ */ .cta{position:relative} .cta-panel{border-radius:28px;padding:64px clamp(28px,5vw,72px);position:relative;overflow:hidden;text-align:center; background: radial-gradient(circle at 50% 0%,rgba(114,75,57,.45),transparent 55%), radial-gradient(circle at 0% 100%,rgba(207,157,123,.16),transparent 45%), linear-gradient(160deg,rgba(22,33,39,.7),rgba(12,21,25,.7)); border:1px solid var(--line)} .cta-panel h2{font-family:var(--f-display);font-weight:700;font-size:clamp(2.2rem,5.4vw,4rem);line-height:1.06; text-transform:uppercase;margin:20px auto 22px;max-width:16ch} .cta-panel p{color:var(--muted);max-width:54ch;margin:0 auto 38px;font-size:1.06rem;font-weight:300} .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:46px} .cta-actions .btn{font-size:1.02rem;padding:18px 36px} .contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:600px;margin:0 auto;text-align:left} .contact-card{padding:22px 24px;display:flex;align-items:center;gap:16px} .contact-card .ic{width:46px;height:46px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center; background:rgba(207,157,123,.08);border:1px solid var(--line);color:var(--brass)} .contact-card .ic svg{width:21px;height:21px} .contact-card .l{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:4px} .contact-card .v{font-weight:500;font-size:1rem;color:var(--text);text-decoration:none;word-break:break-word} a.contact-card{text-decoration:none;transition:transform .4s var(--ease),border-color .4s} a.contact-card:hover{transform:translateY(-4px);border-color:var(--brass)} /* ---------- Contact form ---------- */ .contact-form{max-width:600px;margin:0 auto 26px;text-align:left} .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} .cf-field{display:flex;flex-direction:column;margin-bottom:16px} .cf-field label{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase; color:var(--muted-2);margin-bottom:9px;padding-left:3px} /* In two-column rows, reserve two lines for the label so a wrapped label can't shove its input below its single-line neighbour. Reset on phones (one column). */ .cf-row .cf-field label{min-height:2.8em;line-height:1.3} .cf-field input:not([type=range]):not([type=checkbox]),.cf-field textarea{ font-family:var(--f-sans);font-size:1rem;color:var(--text); background:rgba(12,21,25,.55);border:1px solid var(--line);border-radius:14px;padding:15px 18px;width:100%; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);resize:vertical; transition:border-color .3s,box-shadow .3s,background .3s} .cf-field textarea{min-height:128px;line-height:1.6} .cf-field input::placeholder,.cf-field textarea::placeholder{color:var(--muted-2);opacity:.75} .cf-field input:not([type=range]):not([type=checkbox]):focus,.cf-field textarea:focus{outline:none;border-color:var(--brass); box-shadow:0 0 0 3px rgba(207,157,123,.14);background:rgba(12,21,25,.78)} .cf-field input:user-invalid,.cf-field textarea:user-invalid{border-color:rgba(214,120,92,.6)} .cf-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} .cf-submit{width:100%;margin-top:4px;font-size:1.02rem;padding:17px 36px;border:none;cursor:pointer} .cf-submit[disabled]{opacity:.72;cursor:default;transform:none!important} .cf-spin{display:none;width:18px;height:18px} .cf-submit.loading .cf-spin{display:inline-block;animation:cf-rot .7s linear infinite} @keyframes cf-rot{to{transform:rotate(360deg)}} .cf-status{margin-top:14px;text-align:center;min-height:1.2em;font-size:.92rem;color:var(--muted);transition:color .3s} .cf-status.ok{color:var(--brass)} .cf-status.err{color:#E0A07F} .contact-form.sent{display:none} .cf-thanks{display:none;max-width:600px;margin:0 auto 26px;text-align:center;padding:36px 28px;border-radius:20px; background:rgba(207,157,123,.06);border:1px solid var(--line)} .cf-thanks.show{display:block;animation:pageIn .55s ease both} .cf-thanks .ic{width:56px;height:56px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center; background:rgba(207,157,123,.12);border:1px solid var(--line);color:var(--brass)} .cf-thanks .ic svg{width:26px;height:26px} .cf-thanks h3{font-family:var(--f-display);font-size:1.5rem;font-weight:600;color:var(--text);margin-bottom:8px} .cf-thanks p{color:var(--muted);font-size:1rem;font-weight:300} .cf-or{display:flex;align-items:center;gap:16px;max-width:600px;margin:4px auto 30px;color:var(--muted-2)} .cf-or::before,.cf-or::after{content:"";flex:1;height:1px;background:var(--line-soft)} .cf-or span{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap} @media (max-width:560px){.cf-row{grid-template-columns:1fr;gap:0}.cf-row .cf-field label{min-height:0}} /* ============================================================ FOOTER ============================================================ */ footer{padding:70px 0 38px;border-top:1px solid var(--line-soft);margin-top:40px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:48px} .foot-brand .brand{margin-bottom:18px} .foot-brand p{color:var(--muted);font-size:.92rem;max-width:38ch;font-weight:300} .foot-col h5{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:18px} .foot-col a{display:block;color:var(--muted);text-decoration:none;font-size:.94rem;padding:6px 0;transition:color .3s} .foot-col a:hover{color:var(--brass)} .foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; padding-top:28px;border-top:1px solid var(--line-soft)} .foot-bottom p{font-family:var(--f-mono);font-size:.72rem;color:var(--muted-2);letter-spacing:.04em} .foot-bottom .made{display:flex;align-items:center;gap:8px} .foot-bottom .made b{color:var(--brass);font-weight:500} /* ============================================================ REVEAL ANIMATIONS ============================================================ */ .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .reveal.in{opacity:1;transform:none} .tw-c{opacity:0;transition:opacity .07s linear} /* typewriter: each glyph appears in sequence */ .tw-c.lit{opacity:1} .toast{position:fixed;left:50%;bottom:clamp(20px,4vw,36px);transform:translateX(-50%) translateY(14px); display:inline-flex;align-items:center;gap:10px;max-width:90vw;padding:13px 20px;border-radius:14px;z-index:1500; background:rgba(16,25,30,.95);border:1px solid rgba(207,157,123,.32); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); color:#F2E9DF;font-family:inherit;font-size:.92rem;letter-spacing:.01em; box-shadow:0 18px 50px -12px rgba(0,0,0,.6);opacity:0;pointer-events:none; transition:opacity .4s var(--ease),transform .4s var(--ease)} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .toast svg{width:17px;height:17px;color:#CF9D7B;flex-shrink:0} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s} .reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}.reveal.d6{transition-delay:.48s} /* MOBILE SAFETY NET (pure CSS, no JS): every section is forced visible on phones so content can NEVER be stranded hidden, no matter what happens with JavaScript/scroll. */ @media (max-width:768px){ .reveal{opacity:1 !important;transform:none !important;transition:none !important} } @media (hover:none) and (pointer:coarse){ .reveal{opacity:1 !important;transform:none !important;transition:none !important} } .hero-load{opacity:0;transform:translateY(28px);animation:heroIn 1s var(--ease) forwards} .hl1{animation-delay:.15s}.hl2{animation-delay:.3s}.hl3{animation-delay:.45s}.hl4{animation-delay:.6s}.hl5{animation-delay:.75s}.hl6{animation-delay:.9s} @keyframes heroIn{to{opacity:1;transform:none}} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:980px){ .hero .wrap{grid-template-columns:1fr;gap:40px} .hero-visual{height:380px;max-width:440px} .story .wrap{grid-template-columns:1fr;gap:40px} .bento{grid-template-columns:repeat(2,1fr)} .card.wide{grid-column:span 2} .steps{grid-template-columns:repeat(2,1fr)} .work-grid{grid-template-columns:repeat(2,1fr)} .tcols{columns:2} .faq-wrap{grid-template-columns:1fr;gap:34px} .foot-grid{grid-template-columns:1fr 1fr;gap:30px} .foot-brand{grid-column:span 2} } /* Nav → hamburger. The 8 desktop oval links (Home..FAQ, incl. Ownership) + brand + "Let's Build" CTA need ~1100px of oval width, which the centered oval only reaches at ~1160px viewport. Below that we collapse to the hamburger so the CTA never spills past the oval's right edge — covers iPad portrait/landscape and small laptops. The mobile menu is scrollable, so every link (incl. Ownership) stays reachable. */ @media (max-width:1160px){ .nav-links{display:none} .menu-btn{display:flex;width:44px;height:44px;flex-shrink:0} .nav-tel{display:inline-flex} #navCall{display:none} /* the phone icon is the call button — drop the wide duplicate */ .nav{padding:9px 12px;gap:10px} .nav-cta{gap:8px;flex-shrink:0} /* phone + menu stay a fixed pair, never squeezed off-screen */ /* the phone "button" becomes a compact square icon (it was a wide 74px pill that pushed the menu off the edge) */ .nav-tel.btn{padding:0;width:44px;height:44px;min-height:0;border-radius:12px;flex-shrink:0} .nav-tel svg{width:20px;height:20px} /* let the brand absorb any squeeze: shrink + ellipsis so the menu is ALWAYS visible on any width */ .nav .brand{gap:9px;min-width:0;flex-shrink:1} .nav .brand .mark{width:28px;height:28px} .nav .brand .name{font-size:.92rem;letter-spacing:.07em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} } @media (max-width:760px){ section{padding:84px 0} .hero{padding-top:120px} .hero h1{line-height:1.14} /* looser so stacked lines never merge on small screens */ .section-head h2,.story-text h2,.cta-panel h2{line-height:1.2} .hero-stats{gap:24px} .bento{grid-template-columns:1fr} .card.wide{grid-column:span 1} .steps{grid-template-columns:1fr} .work-grid{grid-template-columns:1fr} .tcols{columns:1} .contact-grid{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} .foot-brand{grid-column:span 1} .cta-panel{padding:46px 24px} .proc-banner{padding:28px 26px} .hero-cta .btn,.cta-actions .btn{flex:1 1 auto} } @media (max-width:420px){ .wrap{padding:0 20px} .hero-stats{gap:18px} .stat .num{font-size:1.5rem} } /* Note: site animations intentionally run regardless of OS "Reduce Motion" (brand choice) */ /* Focus visibility */ a:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:8px} ::selection{background:rgba(207,157,123,.3);color:#fff} /* ===== page transitions ===== */ html{background:#0C1519} /* dark behind everything — the navigation gap is never a white flash */ /* No cross-document View Transitions: that API snapshots the whole rich page (canvas + blurred glass) into a bitmap on every navigation and was the source of the stutter. The arrival veil below — a single GPU-composited transform — is the entire transition, so it stays butter smooth on any machine. */ /* ===== arrival veil — a dark obsidian curtain parts to reveal each page ===== Pure CSS, plays in every browser. The veil covers the viewport at load and exits in a direction unique to the page, a champagne hairline tracing its trailing edge. The content choreography below begins as the veil clears. */ @keyframes veilUp{to{transform:translateY(-101%)}} @keyframes veilDown{to{transform:translateY(101%)}} @keyframes veilLeft{to{transform:translateX(-101%)}} @keyframes veilRight{to{transform:translateX(101%)}} @keyframes veilDissolve{to{opacity:0;transform:scale(1.05)}} body::after{content:"";position:fixed;inset:0;z-index:80;pointer-events:none; background:linear-gradient(160deg,#101D23 0%,#0C1519 55%,#070C0F 100%); will-change:transform,opacity;transform:translateZ(0);backface-visibility:hidden} /* home + brief: the curtain rises */ .page-home::after{border-bottom:1px solid rgba(207,157,123,.5);animation:veilUp .9s var(--ease) .12s both} .page-brief::after{border-bottom:1px solid rgba(207,157,123,.5);animation:veilUp .9s var(--ease) .12s both} /* services: the veil sweeps aside, left to right */ .page-services::after{border-left:1px solid rgba(207,157,123,.5);animation:veilRight .9s var(--ease) .12s both} /* work: theatre curtains part to unveil the gallery */ .page-work::before{content:"";position:fixed;top:0;bottom:0;left:0;width:50.5%;z-index:80;pointer-events:none; background:linear-gradient(160deg,#101D23,#0C1519 60%,#070C0F);will-change:transform;transform:translateZ(0);backface-visibility:hidden; border-right:1px solid rgba(207,157,123,.5);animation:veilLeft .95s var(--ease) .12s both} .page-work::after{left:auto;width:50.5%; border-left:1px solid rgba(207,157,123,.5);animation:veilRight .95s var(--ease) .12s both} /* ownership: the veil settles away downward — the handover */ .page-ownership::after{border-top:1px solid rgba(207,157,123,.5);animation:veilDown .9s var(--ease) .12s both} /* contact: the veil simply dissolves — you have arrived */ .page-contact::after{animation:veilDissolve .95s ease .15s both} /* ===== content settle — opacity-only fade as the veil clears ===== The veil above is each page's distinct page-open motion. Content simply fades up beneath it. Deliberately OPACITY-ONLY: the old clip-path / scale / translate entrances animated whole sections that contain backdrop-filter glass, forcing the blur to recompute every frame — that was the open lag. Opacity is fully compositor-driven and never touches the blur. Home keeps its own staged hero-load sequence. */ @keyframes pgIn{from{opacity:0}to{opacity:1}} .page-services section,.page-work section,.page-ownership section, .page-contact section,.page-brief section{animation:pgIn .55s ease .25s both} /* ===== next-chapter link: each page hands off to the next ===== */ .chapter-next{padding:30px 0 110px} .chapter-link{display:block;position:relative;border-radius:22px;padding:48px 52px;text-decoration:none;overflow:hidden; transition:transform .45s var(--ease),border-color .45s,box-shadow .45s} .chapter-link:hover{transform:translateY(-5px);border-color:var(--brass);box-shadow:0 30px 70px -30px rgba(0,0,0,.75)} .chapter-link .ch-eyebrow{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase; color:var(--brass);display:flex;align-items:center;gap:12px} .chapter-link .ch-eyebrow::before{content:"";width:28px;height:1px;background:var(--grad-brass);display:inline-block} .chapter-link .ch-title{display:flex;align-items:center;gap:18px;font-family:var(--f-display);font-weight:600; font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.1;color:var(--text);margin:16px 0 12px;transition:color .35s} .chapter-link .ch-title svg{width:30px;height:30px;flex-shrink:0;color:var(--brass);transition:transform .45s var(--ease)} .chapter-link .ch-sub{display:block;color:var(--muted);font-weight:300;max-width:60ch} .chapter-link:hover .ch-title{color:var(--champagne)} .chapter-link:hover .ch-title svg{transform:translateX(12px)} @media(max-width:680px){.chapter-link{padding:34px 26px}} /* current page in the oval nav */ .nav-links a[aria-current="page"]{color:var(--brass)} /* ===== living quantum field: the site-wide particle canvas ===== */ #qfield{position:fixed;inset:0;width:100%;height:100%;z-index:var(--z-bg);pointer-events:none} /* ===== premium chrome ===== */ /* branded scrollbar — coffee-to-brass thumb on near-black track */ ::-webkit-scrollbar{width:11px} ::-webkit-scrollbar-track{background:#0A1114} ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#724B39,#A9744E);border-radius:8px;border:3px solid #0A1114} ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#A9744E,#CF9D7B)} html{scrollbar-color:#724B39 #0A1114;scrollbar-width:thin} /* no grey flash on touch taps */ a,button,.btn{-webkit-tap-highlight-color:transparent} /* ===== micro-interactions ===== */ /* footer links: brass underline sweeps in from the left */ .foot-col a{width:fit-content;position:relative} .foot-col a::after{content:"";position:absolute;left:0;bottom:2px;width:100%;height:1px; background:var(--grad-brass);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)} .foot-col a:hover::after{transform:scaleX(1)} /* primary buttons: a champagne sheen sweeps across on hover */ .btn-primary{position:relative;overflow:hidden} .btn-primary::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-70%;width:42%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.30),transparent); transform:skewX(-18deg);pointer-events:none} .btn-primary:hover::after{left:130%;transition:left .6s ease} /* mobile menu: links cascade in when the menu opens */ .mobile-menu.open a:nth-child(1){transition-delay:.04s} .mobile-menu.open a:nth-child(2){transition-delay:.08s} .mobile-menu.open a:nth-child(3){transition-delay:.12s} .mobile-menu.open a:nth-child(4){transition-delay:.16s} .mobile-menu.open a:nth-child(5){transition-delay:.2s} .mobile-menu.open a:nth-child(6){transition-delay:.24s} .mobile-menu.open a:nth-child(7){transition-delay:.28s} .mobile-menu.open a:nth-child(8){transition-delay:.32s} /* ===== branded 404 ===== */ .page-404::after{animation:veilDissolve .95s ease .15s both} .page-404 section{animation:pgIn .55s ease .25s both} .lost{min-height:88vh;display:flex;align-items:center;text-align:center} .lost .wrap{display:flex;flex-direction:column;align-items:center;gap:8px} .lost .code{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.3em;color:var(--brass);text-transform:uppercase} .lost h1{font-family:var(--f-display);font-weight:700;text-transform:uppercase;line-height:1.05; font-size:clamp(2.4rem,6vw,4.4rem);margin:18px 0 14px} .lost p{color:var(--muted);max-width:46ch;margin-bottom:30px} .lost .acts{display:flex;gap:14px;flex-wrap:wrap;justify-content:center} /* ===== mobile: lighter blur for performance ===== backdrop-filter recomputes every frame behind the animating quantum field; on phones that is the dominant cost, so we halve the blur radii and ease the big aurora blurs. Visually near-identical at phone scale, far cheaper to paint. */ @media (max-width:760px){ .glass{backdrop-filter:blur(9px) saturate(118%);-webkit-backdrop-filter:blur(9px) saturate(118%)} .nav{backdrop-filter:blur(9px) saturate(130%);-webkit-backdrop-filter:blur(9px) saturate(130%)} .nav.scrolled{backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%)} .aurora{filter:blur(34px)} .aurora.a4,.aurora.a5{filter:blur(38px)} } /* ===== build page: reassurance strip ===== */ .assure-sec{padding-top:24px} .assure{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;margin:0 auto} .assure-card{padding:28px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:11px} .assure-card .ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--brass);background:rgba(207,157,123,.05)} .assure-card .ic svg{width:22px;height:22px} .assure-card .at{font-family:var(--f-display);font-weight:600;font-size:1.1rem;color:var(--text);letter-spacing:.01em} .assure-card .ad{color:var(--muted);font-size:.92rem;font-weight:300;line-height:1.55} @media(max-width:680px){.assure{grid-template-columns:1fr;max-width:430px}} /* ============================================================ PROJECT BRIEF — multi-step questionnaire (brief.html) Reuses the .cf-* field styles; adds wizard chrome on top. ============================================================ */ .brief-form{max-width:680px;margin:8px auto 26px;text-align:left} .brief-form.sent{display:none} /* build-page banner that points to the brief (second-stage CTA) */ .brief-cta-sec{padding-top:0;padding-bottom:8px} /* progress bar */ .brief-progress{height:4px;border-radius:30px;background:var(--line-soft);overflow:hidden;margin-bottom:14px} .brief-progress-bar{display:block;height:100%;width:16.66%;border-radius:inherit;background:var(--grad-brass); box-shadow:0 0 14px -2px var(--halo);transition:width .55s var(--ease)} .brief-stepmeta{display:flex;align-items:center;gap:10px;margin-bottom:24px; font-family:var(--f-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase} .brief-stepnum{color:var(--muted-2)} .brief-dot{color:var(--brass);opacity:.6} .brief-stepname{color:var(--brass)} /* steps: only the active one shows (JS-driven). No-JS falls back via