@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap');

:root { --ink:#080b0a; --paper:#f7f7f3; --muted:#a9afaa; --aqua:#bce8e5; --aqua-line:#8cc9ca; }
@property --cta-angle { syntax:"<angle>"; initial-value:0deg; inherits:false; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; background:#ebeae4; color:var(--paper); font-family:Sora,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.filter-definitions { position:absolute; width:0; height:0; overflow:hidden; }
.hero { position:relative; isolation:isolate; min-height:min(940px,100svh); overflow:hidden; background:#070908; }
.pearl-pointer,.pearl-pointer-trail i { position:fixed; top:0; left:0; z-index:40; pointer-events:none; will-change:transform,opacity; }
.pearl-pointer { width:34px; height:40px; opacity:0; transform:translate3d(-100px,-100px,0); transition:opacity .14s ease; }
.pearl-pointer.is-visible { opacity:1; }
.pearl-pointer-hand { position:absolute; inset:0; display:grid; place-items:center; filter:drop-shadow(0 2px 3px rgba(4,10,9,.3)); transform-origin:35% 20%; transition:transform .075s cubic-bezier(.2,.8,.2,1),filter .1s ease; }
.pearl-pointer-hand svg { width:30px; height:34px; overflow:visible; fill:rgba(248,250,249,.96); stroke:#111318; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; }
.pearl-pointer.is-action .pearl-pointer-hand { filter:drop-shadow(0 4px 6px rgba(4,10,9,.35)) drop-shadow(0 0 7px rgba(219,235,232,.55)); transform:scale(1.08); }
.pearl-pointer.is-pressed .pearl-pointer-hand { transform:scale(.84) rotate(-5deg); }
.pearl-pointer-trail i { width:25px; height:25px; border-radius:50%; background:radial-gradient(circle,rgba(255,242,249,.82) 0 8%,rgba(203,236,223,.46) 29%,rgba(198,216,241,.24) 49%,transparent 72%); filter:blur(5px); mix-blend-mode:screen; opacity:0; transform:translate3d(-100px,-100px,0); transition:opacity .12s ease; }
.hero.has-custom-pointer,.hero.has-custom-pointer a,.hero.has-custom-pointer button,.hero.has-custom-pointer .mirror-piece { cursor:none!important; }
.pearl-scene,.pearl-image,.pearl-video,.fluid-canvas,.ripple-canvas,.pearl-glow { position:absolute; inset:0; }
.pearl-scene { z-index:-1; overflow:hidden; }
.pearl-image { z-index:0; background:url('assets/figma-lacquer-pearl.png') center/cover no-repeat; filter:url(#pearl-fluid); transform:scale(1.025) translate3d(var(--image-x,0px),var(--image-y,0px),0); transition:transform .8s cubic-bezier(.2,.8,.2,1); will-change:filter,transform; }
.pearl-video { z-index:1; width:100%; height:100%; object-fit:cover; object-position:center; will-change:opacity; }
.pearl-video--back { opacity:0; }
.fluid-canvas { z-index:2; width:100%; height:100%; opacity:0; transition:opacity .8s ease; }
.fluid-ready .fluid-canvas { opacity:1; }.fluid-ready .pearl-image { opacity:0; }
.ripple-canvas { z-index:3; width:100%; height:100%; mix-blend-mode:screen; opacity:.25; }
.pearl-glow { z-index:4; background:radial-gradient(ellipse 47% 50% at 76% 52%, rgba(202,239,255,.22), transparent 69%), linear-gradient(90deg, rgba(0,0,0,.16) 0%, transparent 53%); pointer-events:none; }
.site-header { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; width:88.52%; margin:auto; padding:3.9vw 0; }
.wordmark { display:inline-flex; align-items:center; height:34px; }
.wordmark-logo { display:block; width:auto; height:25px; filter:brightness(0) invert(1); }
.hero-copy { position:relative; z-index:1; width:min(49.05%,820px); margin:9.2vw 0 0 5.74%; }
.eyebrow,.phone-kicker { margin:0; color:rgba(247,247,243,.55); font-size:.68rem; font-weight:600; letter-spacing:.15em; }
h1 { max-width:760px; margin:1.72rem 0 2rem; font-family:Sora,sans-serif; font-size:clamp(2.05rem,3vw,50px); font-weight:600; letter-spacing:-.032em; line-height:1.222; white-space:nowrap; }
.rule { display:block; width:5.2rem; height:2px; background:#92c7ca; }
.lede { max-width:460px; margin:2.02rem 0 2rem; color:rgba(227,232,229,.88); font-size:clamp(.82rem,1.18vw,19px); letter-spacing:-.005em; line-height:1.62; }
.phone-wrap { position:absolute; z-index:2; right:8.2%; top:8.08%; width:min(22.55vw,377px); }
.phone-shadow { position:absolute; inset:6% -6% -3% 8%; background:rgba(83,180,195,.32); filter:blur(24px); transform:translateY(18px); }
.phone-mockup { position:relative; width:100%; aspect-ratio:712 / 1493; filter:drop-shadow(0 28px 24px rgba(0,0,0,.38)); }
.phone-screen-placeholder { position:absolute; z-index:1; inset:2.1% 4.4% 1.9%; overflow:hidden; border-radius:12.4% / 5.6%; background:#fff; container-type:inline-size; }
.phone-ui { position:absolute; inset:0; overflow:hidden; background:#fff; color:#111318; font-family:Sora,Arial,sans-serif; }
.phone-ui p,.phone-ui h2,.phone-ui h3 { margin:0; }
.phone-app-logo { position:absolute; top:6.4%; left:6.2%; z-index:2; display:block; width:43%; height:auto; }
.force-copy { position:absolute; top:15.2%; right:6.2%; left:6.2%; z-index:3; pointer-events:none; transition:top .7s cubic-bezier(.2,.8,.2,1),text-align .3s ease; }
.force-eyebrow { color:#263248; font-size:3cqw; font-weight:600; letter-spacing:.16em; line-height:1; }
.force-copy h2 { margin:3.25cqw 0 0; font-size:7.7cqw; font-weight:700; letter-spacing:-.064em; line-height:1.02; transition:font-size .65s cubic-bezier(.2,.8,.2,1),margin .65s cubic-bezier(.2,.8,.2,1),letter-spacing .65s ease; }
.force-support { max-width:94%; margin-top:2.5cqw!important; color:#454f5e; font-size:3.8cqw; font-weight:450; line-height:1.48; }
.force-stage { position:absolute; top:32%; left:1.5%; width:97%; height:59%; z-index:2; transition:top .75s cubic-bezier(.2,.8,.2,1),height .75s cubic-bezier(.2,.8,.2,1); }
.force-board { display:block; width:100%; height:100%; overflow:visible; touch-action:none; user-select:none; transform-origin:50% 25.8%; transition:transform .85s cubic-bezier(.2,.8,.2,1); }
.force-target-halo { fill:none; stroke:rgba(118,196,197,.2); stroke-width:15; opacity:.34; filter:blur(4px) drop-shadow(0 0 16px rgba(119,201,201,.26)); animation:mirror-halo-breathe 4.8s ease-in-out infinite; transition:stroke .35s ease,stroke-width .35s ease,filter .35s ease,opacity .35s ease; }
.force-complete-glow { fill:none; stroke:url(#force-complete-spectrum); stroke-width:22; opacity:0; filter:blur(15px); pointer-events:none; transition:opacity .55s ease .25s; }
.force-target { fill:#fff; stroke:rgba(77,142,146,.2); stroke-width:1.2; filter:drop-shadow(0 0 4px rgba(122,200,201,.12)); animation:mirror-ring-breathe 4.8s ease-in-out infinite; vector-effect:non-scaling-stroke; }
.force-slot { fill:color-mix(in srgb,var(--slot-color) 9%,transparent); stroke:var(--slot-color); stroke-width:4; stroke-dasharray:9 12; stroke-linejoin:round; opacity:0; filter:drop-shadow(0 0 8px color-mix(in srgb,var(--slot-color) 48%,transparent)); pointer-events:none; transition:opacity .3s ease,fill .3s ease,stroke-width .3s ease,filter .3s ease; vector-effect:non-scaling-stroke; }
.force-slot.is-active { opacity:.38; }
.phone-ui.is-near-target .force-slot.is-active { fill:color-mix(in srgb,var(--slot-color) 18%,transparent); stroke-width:6; opacity:.76; filter:drop-shadow(0 0 15px color-mix(in srgb,var(--slot-color) 68%,transparent)); }
.force-target-label { fill:#299fa3; font-family:Sora,Arial,sans-serif; font-size:30px; font-weight:600; letter-spacing:3.8px; transform-box:fill-box; transform-origin:center; transition:opacity .35s ease,fill .35s ease,transform .35s ease; }
.force-move-cue { fill:none; stroke:#45cfd0; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:3 12; opacity:.9; transition:opacity .35s ease; }
.phone-ui.has-active-piece .force-target-halo { stroke:var(--active-color,#8cc9ca); stroke-width:13; filter:drop-shadow(0 0 8px var(--active-glow,rgba(102,212,209,.35))) drop-shadow(0 0 24px var(--active-glow,rgba(102,212,209,.22))); }
.phone-ui.has-active-piece .force-target-label { fill:var(--active-color,#23bfc3); opacity:0; transform:scale(1.04); }
.phone-ui.is-near-target .force-target-halo { stroke-width:19; filter:drop-shadow(0 0 11px var(--active-glow,rgba(102,212,209,.42))) drop-shadow(0 0 36px var(--active-glow,rgba(102,212,209,.3))); }
.mirror-piece { cursor:grab; outline:none; }
.mirror-piece:focus-visible .piece-edge { stroke-width:9; }
.mirror-piece.is-dragging { cursor:grabbing; }
.piece-visual { filter:drop-shadow(0 0 3px var(--glow-core)) drop-shadow(0 0 13px var(--glow-near)) drop-shadow(0 0 31px var(--glow-mid)) drop-shadow(0 0 54px var(--glow-far)); transform-box:fill-box; transform-origin:center; transition:filter .5s ease,transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s ease; animation:force-piece-arrive .72s cubic-bezier(.2,.8,.2,1) backwards; }
.mirror-piece[data-piece="fire"] .piece-visual { animation-delay:.08s; }
.mirror-piece[data-piece="earth"] .piece-visual { animation-delay:.16s; }
.mirror-piece[data-piece="metal"] .piece-visual { animation-delay:.24s; }
.mirror-piece[data-piece="water"] .piece-visual { animation-delay:.32s; }
.phone-ui.is-guiding .mirror-piece:not(.is-guide-piece) .piece-visual { opacity:.6; }
.mirror-piece.is-guide-piece .piece-visual,.mirror-piece.is-dragging .piece-visual { filter:drop-shadow(0 4px 8px rgba(17,19,24,.16)) drop-shadow(0 0 7px var(--glow-core)) drop-shadow(0 0 22px var(--glow-near)) drop-shadow(0 0 48px var(--glow-mid)); transform:scale(1.055); }
.piece-aura { fill:none; stroke:var(--glow-line); stroke-width:22; stroke-linejoin:round; opacity:.3; filter:blur(13px); pointer-events:none; transition:opacity .4s ease; vector-effect:non-scaling-stroke; }
.mirror-piece.is-guide-piece .piece-aura,.mirror-piece.is-dragging .piece-aura { opacity:.58; }
.piece-edge { fill:none; stroke:var(--piece-color); stroke-width:2.35; stroke-linejoin:round; opacity:.9; filter:drop-shadow(0 0 3px var(--glow-core)); transition:opacity .45s ease,stroke-width .45s ease,filter .45s ease; vector-effect:non-scaling-stroke; }
.piece-hit { fill:transparent; stroke:transparent; stroke-width:28; pointer-events:all; }
.piece-origin-ghost { fill:rgba(225,231,230,.25); stroke:#aeb9b7; stroke-width:3; stroke-dasharray:7 10; stroke-linejoin:round; opacity:0; pointer-events:none; transition:opacity .3s ease; vector-effect:non-scaling-stroke; }
.piece-origin-ghost.is-active { opacity:.46; }
.tray-label { fill:#111318; stroke:#fff; stroke-width:20px; stroke-linejoin:round; paint-order:stroke fill; font-family:Sora,Arial,sans-serif; font-size:38px; font-weight:700; letter-spacing:-.5px; pointer-events:none; transition:opacity .3s ease; }
.tray-label tspan:nth-child(2) { fill:#424c59; stroke:#fff; font-size:31px; font-weight:550; letter-spacing:1.5px; }
.tray-label .tray-label-cn { fill:#424c59; stroke:#fff; font-family:"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif; font-size:30px; font-weight:550; letter-spacing:.4px; }
.phone-ui.has-active-piece .tray-label { opacity:.28; }
.phone-ui.has-active-piece .tray-label.is-active,.tray-label.is-placed { opacity:0; }
.mirror-piece.is-placed { cursor:default; }
.force-status { position:absolute; right:5%; bottom:2.7%; left:5%; z-index:4; color:#454f5e; font-size:3.35cqw; font-weight:450; line-height:1.4; text-align:center; transition:color .35s ease; }
.force-complete-legend { position:absolute; right:5%; bottom:7.5%; left:5%; z-index:3; display:flex; flex-wrap:wrap; justify-content:center; gap:3.8cqw 3cqw; opacity:0; pointer-events:none; transform:translateY(2cqw); transition:opacity .45s ease .35s,transform .55s cubic-bezier(.2,.8,.2,1) .35s; }
.force-complete-legend span { position:relative; width:28%; padding-top:2.5cqw; text-align:center; }
.force-complete-legend span::before { position:absolute; top:0; left:50%; width:1.8cqw; height:1.8cqw; border:1px solid color-mix(in srgb,var(--legend-color) 78%,#7d8790); border-radius:50%; background:var(--legend-color); box-shadow:0 0 2.2cqw color-mix(in srgb,var(--legend-color) 65%,transparent); content:""; transform:translateX(-50%); }
.force-complete-legend b,.force-complete-legend small { display:block; }
.force-complete-legend b { margin-top:1.1cqw; color:#111318; font-size:3cqw; letter-spacing:-.04em; }
.force-complete-legend small { margin-top:.65cqw; color:#454f5e; font-size:2.5cqw; font-weight:550; letter-spacing:.1em; }
.force-complete-cta { --cta-x:50%; --cta-y:50%; position:absolute; right:7%; bottom:7.2%; left:7%; z-index:5; display:flex; align-items:center; justify-content:space-between; isolation:isolate; height:14cqw; padding:0 5.2cqw; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:radial-gradient(circle at var(--cta-x) var(--cta-y),rgba(255,255,255,.13),transparent 32%),linear-gradient(135deg,#111318,#252a30); color:#fff; font:600 3.65cqw/1 Sora,Arial,sans-serif; letter-spacing:-.035em; box-shadow:0 2.2cqw 5cqw rgba(17,19,24,.16),inset 0 1px rgba(255,255,255,.1); opacity:0; transform:translateY(3cqw); pointer-events:none; transition:opacity .5s ease .65s,transform .65s cubic-bezier(.2,.8,.2,1) .65s,box-shadow .25s ease,background .45s ease; }
.force-complete-cta::before { position:absolute; inset:-1.6cqw; z-index:-2; border-radius:inherit; background:conic-gradient(from 20deg,rgba(224,190,207,.7),rgba(193,224,210,.72),rgba(203,220,236,.7),rgba(231,214,169,.64),rgba(224,190,207,.7)); filter:blur(2.8cqw); opacity:0; content:""; transition:opacity .35s ease; }
.force-complete-cta::after { position:absolute; inset:-1px; z-index:-1; padding:1px; border-radius:inherit; background:conic-gradient(from var(--cta-angle,0deg),transparent 0 12%,rgba(255,226,239,.95) 20%,rgba(198,235,220,.92) 34%,rgba(207,225,255,.92) 51%,rgba(244,225,175,.9) 68%,transparent 78% 100%); content:""; opacity:.18; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); transition:opacity .3s ease; }
.force-complete-cta span,.force-complete-cta b { position:relative; z-index:2; }
.force-complete-cta b { font-size:6cqw; font-weight:400; line-height:1; transition:transform .25s ease; }
.force-complete-cta:hover,.force-complete-cta:focus-visible { background:radial-gradient(circle at var(--cta-x) var(--cta-y),rgba(255,255,255,.22),transparent 28%),linear-gradient(110deg,#202328 0%,#533f4a 22%,#41564c 43%,#435764 63%,#544d63 82%,#202328 100%); background-size:100% 100%,220% 100%; box-shadow:0 3cqw 7cqw rgba(17,19,24,.25),0 0 6cqw rgba(204,222,222,.14),inset 0 1px rgba(255,255,255,.16); animation:cta-iridescence 3.6s ease-in-out infinite alternate; }
.force-complete-cta:hover::before,.force-complete-cta:focus-visible::before { opacity:.58; }
.force-complete-cta:hover::after,.force-complete-cta:focus-visible::after { opacity:.9; animation:cta-spectrum 3.4s linear infinite; }
.force-complete-cta:hover b { transform:translateX(.8cqw); }
.force-complete-cta:active { transform:translateY(.35cqw); }
.force-complete-cta:focus-visible { outline:2px solid #8fc4c6; outline-offset:3px; }
.phone-ui.is-complete .force-target-label,.phone-ui.is-complete .force-move-cue { opacity:0; }
.phone-ui.is-complete .force-copy { top:16.8%; text-align:center; }
.phone-ui.is-complete .force-eyebrow,.phone-ui.is-complete .force-support { opacity:0; }
.phone-ui.is-complete .force-copy h2 { margin:0; font-size:5.25cqw; letter-spacing:-.045em; word-spacing:.1em; line-height:1; white-space:nowrap; }
.phone-ui.is-complete .force-stage { top:24%; height:65%; }
.phone-ui.is-complete .force-target { stroke:rgba(17,19,24,.2); }
.phone-ui.is-complete .force-target-halo { stroke:rgba(17,19,24,.12); filter:none; }
.phone-ui.is-complete .force-complete-glow { opacity:.68; animation:complete-glow-breathe 4.2s ease-in-out infinite; }
.phone-ui.is-complete .force-board { transform:scale(1.48); }
.phone-ui.is-complete .piece-tray-labels { opacity:0; }
.phone-ui.is-complete .force-complete-legend { visibility:hidden; opacity:0; transform:translateY(2cqw); }
.phone-ui.is-complete .force-complete-cta { opacity:1; transform:translateY(0); pointer-events:auto; }
.phone-ui.is-complete .force-status { opacity:0; }
.phone-ui.is-complete .piece-visual { filter:none; animation:none; }
.phone-ui.is-complete .piece-aura { opacity:0; }
.phone-ui.is-complete .piece-edge { stroke-width:1.35; opacity:.52; filter:none; }
@keyframes complete-glow-breathe { 0%,100% { opacity:.5; } 50% { opacity:.72; } }
@keyframes mirror-ring-breathe { 0%,100% { stroke:rgba(77,142,146,.12); } 50% { stroke:rgba(77,142,146,.3); } }
@keyframes mirror-halo-breathe { 0%,100% { opacity:.2; stroke-width:13; } 50% { opacity:.48; stroke-width:18; } }
@keyframes force-piece-arrive { from { opacity:0; transform:translateY(26px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes cta-iridescence { to { background-position:100% 50%,100% 50%; } }
@keyframes cta-spectrum { to { --cta-angle:360deg; } }
.phone-map-status { position:absolute; top:15.7%; right:6.2%; left:6.2%; display:flex; align-items:flex-start; justify-content:space-between; color:#263248; font-size:2.05cqw; font-weight:600; letter-spacing:.13em; white-space:nowrap; }
.phone-map-progress { width:30%; color:#4d5665; font-size:1.95cqw; letter-spacing:.08em; }
.phone-map-progress i { position:relative; display:block; width:100%; height:1px; margin-top:1.7cqw; background:#d2d8e2; }
.phone-map-progress i::before,.phone-map-progress i::after { position:absolute; top:50%; width:2.4cqw; height:2.4cqw; border:1px solid #b9c4d4; border-radius:50%; background:#fff; content:""; transform:translateY(-50%); }
.phone-map-progress i::before { left:0; border-color:#66d4d3; }.phone-map-progress i::after { right:0; }
.phone-ui > h2 { position:absolute; top:22.1%; right:6.2%; left:6.2%; font-size:7.8cqw; font-weight:700; letter-spacing:-.064em; line-height:1.02; }
.phone-guide-orb { position:absolute; top:38.2%; left:7.4%; z-index:2; display:flex; width:20.5%; aspect-ratio:1; flex-direction:column; align-items:center; justify-content:center; border:1px solid #a9d8de; border-radius:50%; background:radial-gradient(circle at 35% 28%,#fff 0 11%,#e5ffff 25%,#dff6ff 55%,#eee8ff 100%); color:#15364a; font-size:3.8cqw; box-shadow:0 1.8cqw 4.4cqw rgba(86,136,163,.18); }
.phone-guide-orb small { margin-top:1.1cqw; color:#4f788c; font-size:1.45cqw; font-weight:600; letter-spacing:.18em; }
.phone-journey-line { position:absolute; top:45.2%; left:0; z-index:0; width:63%; height:42%; overflow:visible; filter:drop-shadow(0 1.2cqw 2.2cqw rgba(109,200,226,.18)); }
.phone-journey-line path { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.phone-route-glow { stroke:#d9f7ff; stroke-width:22; opacity:.7; }.phone-route-core { stroke:url(#phone-route-gradient); stroke-width:12; opacity:.78; }.phone-route-dots { stroke:#fff; stroke-width:2.4; stroke-dasharray:1 10; }
.phone-focus-quest { position:absolute; top:57.3%; right:5.8%; left:5.8%; height:30.5%; }
.phone-focus-node { position:absolute; top:13%; left:0; z-index:3; display:grid; width:18%; aspect-ratio:1; place-items:center; border:1.5px solid #62d7d4; border-radius:50%; background:#fff; font-size:6.8cqw; font-weight:700; box-shadow:0 0 0 3cqw rgba(91,210,207,.13),0 2cqw 4cqw rgba(36,88,106,.12); }
.phone-focus-card { position:absolute; inset:0 0 0 12.5%; overflow:hidden; padding:6.2cqw 6.5cqw; border:1px solid #66d4d1; border-radius:6.2cqw; background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(239,255,254,.95)); box-shadow:0 3.2cqw 7cqw rgba(31,55,69,.12); }
.phone-focus-card p { color:#334362; font-size:2.7cqw; font-weight:600; letter-spacing:.15em; }
.phone-focus-card h3 { position:relative; z-index:2; margin-top:4.3cqw; max-width:70%; font-size:6.2cqw; font-weight:700; letter-spacing:-.055em; line-height:1.02; }
.phone-card-route { position:absolute; top:13%; right:3%; width:49%; height:56%; opacity:.92; }
.phone-card-route path { fill:none; stroke:#78d9ec; stroke-width:4; stroke-linecap:round; stroke-dasharray:5 7; }.phone-card-route circle { fill:#d9fbf8; stroke:#50cbc8; stroke-width:2; }
.phone-focus-card button { position:absolute; bottom:6cqw; left:6.5cqw; z-index:2; display:flex; align-items:center; justify-content:space-between; width:72%; height:13cqw; padding:0 5cqw; border:1px solid #64d5d0; border-radius:999px; background:linear-gradient(90deg,#dafbf8,#cceff5); color:#102f35; font:600 4.2cqw/1 Sora,sans-serif; box-shadow:0 1.8cqw 3.8cqw rgba(56,162,166,.14); }
.phone-focus-card button b { font-size:6.5cqw; font-weight:400; }
.phone-shell-image { position:absolute; z-index:2; top:-1.45%; left:-21.9%; width:143.85%; height:102.9%; pointer-events:none; user-select:none; }
.handoff { display:grid; grid-template-columns:.5fr 1fr 1fr; gap:3rem; align-items:start; padding:7rem max(5rem,calc((100vw - 1620px)/2)); background:#eeece5; color:#0b0c0b; }.handoff p { margin:0; color:#686d69; font-size:.66rem; font-weight:700; letter-spacing:.14em; }.handoff h2 { max-width:31rem; margin:0; font:500 clamp(1.8rem,3vw,3.25rem)/1.1 "DM Sans",sans-serif; letter-spacing:-.065em; }.handoff span { max-width:25rem; color:#656a66; font-size:.9rem; line-height:1.6; }
@media (max-width: 850px) { .hero { min-height:960px; }.site-header { width:calc(100% - 3rem); padding:1.8rem 0; }.wordmark { height:30px; }.wordmark-logo { height:22px; }.hero-copy { width:calc(100% - 3rem); margin:6.3rem auto 0; }.hero-copy h1 { white-space:normal; line-height:1.08; }.lede { max-width:20rem; margin-top:2rem; }.phone-wrap { top:auto; right:1.5rem; bottom:-1.5rem; width:255px; }.handoff { grid-template-columns:1fr; padding:4rem 1.5rem; gap:1.4rem; } }
@media (hover:hover) and (pointer:fine) { .mirror-piece:not(.is-placed):hover .piece-visual { transform:scale(1.025); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }.pearl-video,.fluid-canvas,.ripple-canvas,.pearl-pointer,.pearl-pointer-trail { display:none; }.pearl-image { filter:none; transform:none; } }