@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,500i&display=swap');

:root { --paper:#e8ede9; --paper-deep:#dce3de; --ink:#12201d; --quiet:#596560; --forest:#173b35; --moss:#6f8574; --mint:#8adac6; --lime:#cbf37e; --line:rgba(18,32,29,.16); --serif:'Newsreader',Iowan Old Style,Georgia,serif; --sans:'DM Sans',Arial,sans-serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; } html { background:var(--paper); scroll-behavior:smooth; } body { margin:0; overflow-x:hidden; color:var(--ink); background:var(--paper); font-family:var(--sans); } a { color:inherit; text-decoration:none; } p,h1,h2,h3 { margin-top:0; } .shell { width:min(1240px,calc(100% - 64px)); margin-inline:auto; }
.nav-wrap { position:relative; z-index:2; padding:max(16px,calc(env(safe-area-inset-top,0px) + 8px)) 32px 0; pointer-events:none; }.nav { height:60px; width:min(1240px,100%); margin:auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 9px 0 18px; border:1px solid rgba(18,32,29,.12); border-radius:18px; background:rgba(241,245,241,.78); box-shadow:0 12px 38px rgba(32,48,42,.10),inset 0 1px rgba(255,255,255,.58); backdrop-filter:blur(18px); pointer-events:auto; transition:height .25s,box-shadow .25s,background .25s; }.nav.is-settled { height:54px; background:rgba(241,245,241,.9); box-shadow:0 8px 26px rgba(32,48,42,.12),inset 0 1px rgba(255,255,255,.64); }.brand { display:inline-flex; align-items:center; gap:8px; width:max-content; font-size:14px; font-weight:600; letter-spacing:-.045em; }.brand span span { color:#4c7770; }.brand-mark { display:grid; place-items:center; width:23px; height:23px; border:1px solid var(--ink); border-radius:50%; color:var(--forest); font:500 16px/1 var(--serif); }.nav-links { display:flex; gap:28px; color:#53605a; font-size:12px; }.nav-links a { transition:color .2s; }.nav-links a:hover { color:var(--forest); }.nav-cta { justify-self:end; display:flex; align-items:center; gap:8px; padding:10px 13px; border-radius:12px; background:linear-gradient(145deg,#213f39,#0d2621); box-shadow:inset 0 1px rgba(255,255,255,.18),0 3px 7px rgba(14,40,34,.16); color:#eaf1ec; font-size:11px; font-weight:600; }.nav-cta b { color:var(--mint); font-size:16px; line-height:0; }
.hero { position:relative; display:grid; grid-template-columns:.95fr 1.05fr; gap:70px; min-height:850px; padding:179px 0 102px; }.hero-copy { align-self:center; max-width:560px; }.eyebrow { margin-bottom:19px; color:#53615b; font:500 10px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; }.eyebrow i { display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 3px rgba(138,218,198,.22); vertical-align:1px; } h1,h2 { font-family:var(--serif); font-weight:500; letter-spacing:-.065em; } h1 { margin-bottom:25px; font-size:clamp(60px,7vw,106px); line-height:.84; } h1 em,h2 em { color:#3d766b; }.lede { max-width:405px; margin-bottom:30px; color:#53615b; font-size:16px; line-height:1.55; }.text-action { display:inline-flex; align-items:center; gap:28px; padding-bottom:8px; border-bottom:1px solid #77847d; font-size:11px; font-weight:600; letter-spacing:.02em; transition:border-color .2s,color .2s; }.text-action:hover { border-color:var(--forest); color:var(--forest); }.text-action span { font-size:17px; }.hero-field { position:relative; align-self:center; height:555px; overflow:hidden; border-radius:34px 7px 34px 7px; background:linear-gradient(138deg,#2d5149,#17332e 58%,#10231f); box-shadow:inset 0 1px rgba(255,255,255,.15),0 24px 60px rgba(26,49,41,.17); color:#dce9e0; }.field-grid { position:absolute; inset:-20%; opacity:.17; background:linear-gradient(rgba(205,243,126,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(205,243,126,.55) 1px,transparent 1px); background-size:45px 45px; transform:rotate(-10deg); }.field-top,.field-bottom { position:absolute; z-index:2; margin:0; color:#c1d1c8; font:400 9px/1.45 var(--mono); text-transform:uppercase; letter-spacing:.1em; }.field-top { top:25px; left:25px; }.field-bottom { right:26px; bottom:25px; text-align:right; }.route { position:absolute; border:1px solid rgba(203,243,126,.48); border-radius:50%; }.route-a { left:7%; top:11%; width:93%; height:87%; }.route-b { left:23%; top:23%; width:54%; height:61%; }.route-c { left:43%; top:35%; width:18%; height:28%; }.place { position:absolute; z-index:3; display:grid; place-items:center; width:116px; height:116px; border:1px solid rgba(234,245,235,.46); border-radius:50%; background:rgba(27,65,57,.76); box-shadow:inset 0 1px rgba(255,255,255,.14),0 17px 28px rgba(3,17,13,.18); text-align:center; backdrop-filter:blur(9px); }.place span { position:absolute; top:10px; left:12px; width:5px; height:5px; border-radius:50%; background:var(--lime); }.place p { position:absolute; right:12px; bottom:9px; margin:0; color:#96aaa1; font:400 8px var(--mono); }.place b { margin-top:3px; font:500 15px/.86 var(--serif); letter-spacing:-.07em; }.place small { position:absolute; bottom:21px; color:#afc1b8; font:400 7px var(--mono); text-transform:uppercase; letter-spacing:.1em; }.place-a { left:25%; top:26%; }.place-b { right:11%; top:50%; width:93px; height:93px; }.place-b b { font-size:12px; }.place-c { left:11%; bottom:12%; width:80px; height:80px; }.place-c b { font-size:11px; }.place-c small { bottom:13px; }.field-orb { position:absolute; width:270px; height:270px; right:-118px; top:-91px; border-radius:50%; background:radial-gradient(circle at 38% 38%,rgba(203,243,126,.96),rgba(138,218,198,.48) 36%,transparent 69%); filter:blur(3px); }.hero-foot { position:absolute; bottom:38px; left:0; right:0; display:flex; justify-content:space-between; color:#68766e; font:500 9px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.opening { display:grid; grid-template-columns:1fr 2fr; gap:30px; padding:138px 0 160px; border-top:1px solid var(--line); }.opening-copy { max-width:805px; font:500 clamp(42px,5vw,74px)/.94 var(--serif); letter-spacing:-.07em; }.opening-copy>p { margin-bottom:42px; }.opening-copy .quiet { max-width:590px; margin-bottom:0; color:#6a7770; font-size:.52em; line-height:1.02; }
.work { padding:0 0 155px; }.work-head { display:flex; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line); }.work-head>p:last-child { color:#617069; font:500 10px var(--mono); letter-spacing:.1em; }.case-study { display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:center; margin-top:36px; }.case-canvas { position:relative; min-height:630px; overflow:hidden; border-radius:5px 34px 5px 34px; background:#c3bcae; box-shadow:0 16px 40px rgba(36,51,44,.08); }.canvas-sun { position:absolute; top:8%; right:17%; width:190px; height:190px; border-radius:50%; background:#f0d492; filter:blur(3px); }.canvas-wall { position:absolute; inset:0 0 31% 0; background:linear-gradient(109deg,#a0a899 0 26%,#e8decb 26% 51%,#827f71 51% 52%,#c3b8a4 52% 73%,#887f70 73% 74%,#dde0d6 74%); }.canvas-floor { position:absolute; z-index:1; left:-12%; right:-12%; bottom:-8%; height:44%; background:repeating-linear-gradient(103deg,#b2a895 0 68px,#d4c6ad 69px 137px); transform:skewY(-7deg); }.canvas-shadow { position:absolute; z-index:2; bottom:15%; left:7%; width:89%; height:28%; border-radius:50%; background:rgba(69,58,42,.37); filter:blur(19px); transform:rotate(-9deg); }.canvas-browser { position:absolute; z-index:3; top:106px; left:9%; width:72%; box-shadow:0 22px 45px rgba(56,50,41,.22); transform:rotate(-3deg); }.browser-bar { display:flex; align-items:center; gap:5px; height:28px; padding:0 10px; background:#f5f2eb; }.browser-bar span { width:5px; height:5px; border-radius:50%; background:#a1a198; }.browser-bar em { margin:auto; color:#797871; font:400 7px var(--mono); }.browser-page { position:relative; display:flex; flex-direction:column; justify-content:space-between; height:320px; padding:29px; overflow:hidden; background:#eaebe4; color:#1d2421; }.browser-page:after { content:''; position:absolute; right:-14%; bottom:-21%; width:61%; aspect-ratio:1; border-radius:50%; background:linear-gradient(140deg,#798d80,#c3d0bd); }.browser-page p,.browser-page b { position:relative; z-index:1; margin:0; font:500 8px var(--mono); letter-spacing:.11em; text-transform:uppercase; }.browser-page strong { position:relative; z-index:1; font:500 clamp(46px,5vw,67px)/.79 var(--serif); letter-spacing:-.08em; }.browser-page strong i { color:#53776c; font-weight:500; }.canvas-note { position:absolute; z-index:4; right:28px; bottom:26px; margin:0; color:#243a34; font:500 9px/1.45 var(--mono); letter-spacing:.1em; text-align:right; text-transform:uppercase; }.case-copy { max-width:410px; }.case-number { margin-bottom:27px; color:#5c6a62; font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }.case-copy h2 { margin-bottom:27px; font-size:clamp(43px,4.6vw,68px); line-height:.86; }.case-copy>p:not(.case-number) { max-width:355px; color:#59655f; font-size:15px; line-height:1.55; }.round-link { display:inline-flex; align-items:center; gap:12px; margin-top:25px; padding:12px 16px; border:1px solid rgba(18,32,29,.18); border-radius:100px; background:rgba(247,249,247,.43); box-shadow:inset 0 1px rgba(255,255,255,.66); font-size:11px; font-weight:600; transition:transform .2s,background .2s; }.round-link:hover { transform:translateY(-2px); background:#f6faf7; }.round-link span { color:#3e786b; font-size:16px; }
.method { display:grid; grid-template-columns:1fr 1fr; gap:8%; padding:140px 0; border-top:1px solid var(--line); }.method-intro h2 { margin-bottom:0; font-size:clamp(52px,5vw,77px); line-height:.84; }.method-notes { border-top:1px solid var(--line); }.method-notes article { display:grid; grid-template-columns:54px 1fr; gap:15px; padding:23px 0 34px; border-bottom:1px solid var(--line); }.method-notes span { color:#447a70; font:500 10px var(--mono); }.method-notes h3 { margin-bottom:12px; font:500 30px/1 var(--serif); letter-spacing:-.05em; }.method-notes p { max-width:350px; margin-bottom:0; color:#5e6b64; font-size:14px; line-height:1.5; }
.line-section { overflow:hidden; background:var(--forest); color:#e3eee7; }.line-inner { position:relative; min-height:550px; padding-top:32px; }.line-section .eyebrow { color:#b5c7bb; }.line-section .eyebrow i { background:var(--lime); box-shadow:0 0 0 3px rgba(203,243,126,.16); }.line-copy { position:relative; z-index:1; max-width:1000px; margin:105px 0 0 10%; font:500 clamp(51px,7.2vw,108px)/.82 var(--serif); letter-spacing:-.08em; }.line-mark { position:absolute; right:-7%; bottom:-43%; color:rgba(203,243,126,.15); font:500 590px/.7 var(--serif); }
.hello { display:grid; grid-template-columns:1.2fr .8fr; gap:11%; padding:154px 0 142px; }.hello h2 { margin-bottom:0; font-size:clamp(51px,5.6vw,84px); line-height:.83; }.hello-action { align-self:end; max-width:373px; color:#526059; font-size:15px; line-height:1.55; }.hello-action>p { margin-bottom:28px; }.button { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-radius:15px; background:linear-gradient(140deg,#25473f,#112e28); box-shadow:inset 0 1px rgba(255,255,255,.2),0 7px 13px rgba(17,46,40,.16); color:#eff6f0; font-size:11px; font-weight:600; }.button span { color:var(--mint); font-size:20px; }.hello-action small { display:block; margin-top:19px; color:#77837d; font-size:11px; }.hello-action small a { border-bottom:1px solid #77837d; color:var(--ink); }.footer { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; padding:25px 0 33px; border-top:1px solid var(--line); color:#5f6e66; font-size:11px; line-height:1.35; }.footer p { margin:0; }.footer p:last-child { text-align:right; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1); }.reveal.is-visible { opacity:1; transform:none; }.delay-1 { transition-delay:.12s; }.delay-2 { transition-delay:.2s; } @keyframes nav-in { to { transform:none; } }
@media (max-width:760px) { .shell { width:min(100% - 36px,600px); }.nav-wrap { padding:max(10px,calc(env(safe-area-inset-top,0px) + 8px)) 18px 0; }.nav { height:56px; padding:0 8px 0 15px; border-radius:16px; grid-template-columns:1fr auto; }.nav-links { display:none; }.hero { grid-template-columns:1fr; gap:45px; min-height:auto; padding:142px 0 72px; }.hero h1 { font-size:clamp(56px,16vw,75px); }.hero-field { height:455px; border-radius:28px 5px 28px 5px; }.place-a { left:22%;top:25%; }.place-b { right:7%; }.hero-foot { position:static; display:grid; grid-template-columns:1fr auto; gap:12px; margin-top:-17px; }.hero-foot span:nth-child(2) { display:none; }.opening { display:block; padding:78px 0 96px; }.opening-copy { margin-top:31px; }.opening-copy>p { margin-bottom:31px; }.work { padding-bottom:92px; }.case-study { grid-template-columns:1fr; gap:38px; }.case-canvas { min-height:470px; }.canvas-browser { top:78px; left:9%; width:82%; }.browser-page { height:260px; padding:22px; }.case-copy h2 { font-size:51px; }.method { display:block; padding:92px 0; }.method-notes { margin-top:54px; }.method-notes article { grid-template-columns:45px 1fr; }.line-inner { min-height:450px; }.line-copy { margin:84px 15px 0; }.line-mark { right:-23%;bottom:-19%;font-size:390px; }.hello { display:block; padding:100px 0 90px; }.hello-action { margin-top:62px; }.footer { grid-template-columns:1fr auto; gap:26px 12px; }.footer p:nth-child(2) { grid-row:2; }.footer p:last-child { grid-row:2; }.footer .brand { font-size:13px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.nav-wrap { transform:none; animation:none; }.reveal { opacity:1; transform:none; transition:none; } }

/* Motion-system refinement: layered case objects, not a conventional card grid. */
.hero-field { --field-x:0px; --field-y:0px; transition:box-shadow .35s ease; }
.hero-field:hover { box-shadow:inset 0 1px rgba(255,255,255,.18),0 31px 72px rgba(26,49,41,.26); }
.field-grid { transform:translate(var(--field-x),var(--field-y)) rotate(-10deg); transition:transform .55s cubic-bezier(.2,.8,.2,1); }
.route { transition:transform .55s cubic-bezier(.2,.8,.2,1); }
.route-a { transform:translate(var(--field-x),var(--field-y)); }.route-b { transform:translate(var(--field-x),var(--field-y)); }
.place { transition:transform .55s cubic-bezier(.2,.8,.2,1); }.place-a { animation:float-a 5.8s ease-in-out infinite; }.place-b { animation:float-b 6.6s ease-in-out -1.8s infinite; }.place-c { animation:float-c 5.2s ease-in-out -.7s infinite; }.field-orb { transform:translate(var(--field-x),var(--field-y)); transition:transform .55s cubic-bezier(.2,.8,.2,1); }
.motion-stage { overflow:hidden; padding:136px 0 148px; background:#0d1715; color:#edf4ef; }.motion-shell { display:grid; grid-template-columns:.75fr 1.25fr; gap:8%; align-items:center; }.motion-stage .eyebrow { color:#aebfb5; }.motion-stage .eyebrow i { background:var(--lime); box-shadow:0 0 0 3px rgba(203,243,126,.14); }.motion-intro { max-width:410px; }.motion-intro h2 { margin-bottom:25px; font-size:clamp(48px,5vw,75px); line-height:.84; }.motion-intro h2 em { color:var(--mint); }.motion-intro>p:last-child { margin-bottom:0; color:#a3b3aa; font-size:15px; line-height:1.55; }.motion-deck { position:relative; min-height:510px; perspective:1200px; }.deck-glow { position:absolute; left:22%; top:16%; width:58%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(138,218,198,.32),rgba(138,218,198,.04) 52%,transparent 70%); filter:blur(11px); }.motion-card { position:absolute; overflow:hidden; width:270px; height:370px; padding:14px; border:1px solid rgba(240,249,242,.25); border-radius:20px 5px 20px 5px; box-shadow:0 30px 55px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.18); backdrop-filter:blur(10px); transition:transform .65s cubic-bezier(.2,.8,.2,1),box-shadow .5s; }.motion-card:hover { z-index:5; box-shadow:0 40px 70px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.28); }.card-top { display:grid; grid-template-columns:24px 1fr 20px; align-items:center; color:#c9d8ce; font:400 8px var(--mono); letter-spacing:.1em; }.card-top b { font-weight:400; }.card-top i { color:var(--mint); font-size:15px; font-style:normal; text-align:right; }.card-art { position:relative; height:263px; margin:13px 0; overflow:hidden; border-radius:12px 3px 12px 3px; }.card-bottom { display:grid; gap:3px; }.card-bottom strong { font:500 22px/.9 var(--serif); letter-spacing:-.05em; }.card-bottom small { color:#b6c8bd; font:400 7px var(--mono); letter-spacing:.08em; text-transform:uppercase; }.motion-card-a { z-index:3; left:14%; top:54px; background:#2e5b51; transform:rotate(-10deg) translateZ(45px); animation:deck-a 8s ease-in-out infinite; }.motion-card-a:hover { transform:rotate(-4deg) translate3d(-12px,-20px,85px)!important; }.motion-card-b { z-index:2; left:39%; top:9px; background:#d6ecdc; color:#17241f; transform:rotate(7deg) translateZ(1px); animation:deck-b 8s ease-in-out -2.3s infinite; }.motion-card-b .card-top,.motion-card-b .card-bottom small { color:#496357; }.motion-card-b .card-top i { color:#2c7465; }.motion-card-b:hover { transform:rotate(3deg) translate3d(9px,-18px,80px)!important; }.motion-card-c { z-index:1; right:0; top:112px; height:342px; background:#1d3933; transform:rotate(14deg) translateZ(-30px); animation:deck-c 8s ease-in-out -4.1s infinite; }.motion-card-c:hover { transform:rotate(7deg) translate3d(13px,-22px,70px)!important; }.art-a { background:linear-gradient(135deg,#dce6d7,#afc5b4); }.art-a em { position:absolute; z-index:2; left:17px; bottom:17px; color:#24433b; font:500 119px/.7 var(--serif); letter-spacing:-.13em; }.art-a span { position:absolute; width:150%; height:47%; left:-25%; bottom:-14%; border-radius:50%; background:rgba(248,237,194,.65); transform:rotate(-15deg); }.art-a:after { content:''; position:absolute; width:45%; height:45%; top:14%; right:13%; border-radius:50%; background:#efcf7f; filter:blur(2px); }.art-b { display:grid; place-items:center; background:linear-gradient(145deg,#153c34,#24594d); color:#e6f2e9; text-align:center; }.art-b span { position:relative; z-index:1; font:500 33px/.79 var(--serif); letter-spacing:-.07em; }.art-b em { color:var(--lime); font-style:italic; }.art-b:after { content:''; position:absolute; inset:10%; border:1px solid rgba(203,243,126,.46); border-radius:50%; }.art-c { background:#b6ddd1; }.art-c span { position:absolute; display:block; border:1px solid rgba(20,58,49,.7); border-radius:50%; }.art-c span:nth-child(1) { width:220px; height:220px; left:18px; top:19px; }.art-c span:nth-child(2) { width:160px; height:160px; left:48px; top:49px; }.art-c span:nth-child(3) { width:82px; height:82px; left:86px; top:88px; background:#1c5548; }.deck-tag { position:absolute; z-index:4; right:7px; bottom:2px; margin:0; color:#97aaa0; font:400 8px/1.5 var(--mono); letter-spacing:.1em; text-align:right; text-transform:uppercase; }
@keyframes float-a { 50% { transform:translateY(-10px) rotate(3deg); } } @keyframes float-b { 50% { transform:translateY(13px) rotate(-4deg); } } @keyframes float-c { 50% { transform:translateY(-8px) rotate(5deg); } } @keyframes deck-a { 50% { transform:rotate(-6deg) translate3d(0,-17px,62px); } } @keyframes deck-b { 50% { transform:rotate(10deg) translate3d(0,13px,2px); } } @keyframes deck-c { 50% { transform:rotate(10deg) translate3d(0,-12px,-20px); } }
@media (max-width:760px) { .motion-stage { padding:91px 0 82px; }.motion-shell { display:block; }.motion-deck { min-height:454px; margin-top:47px; }.motion-card { width:208px; height:292px; padding:11px; border-radius:17px 4px 17px 4px; }.card-art { height:201px; margin:10px 0; }.motion-card-a { left:0; top:60px; }.motion-card-b { left:25%; top:0; }.motion-card-c { right:-7%; top:105px; height:272px; }.card-bottom strong { font-size:18px; }.art-a em { left:13px; bottom:13px; font-size:91px; }.art-b span { font-size:26px; }.art-c span:nth-child(1) { width:170px; height:170px; left:13px; top:14px; }.art-c span:nth-child(2) { width:122px; height:122px; left:36px; top:38px; }.art-c span:nth-child(3) { width:62px; height:62px; left:66px; top:68px; }.deck-tag { right:0; bottom:0; } }
@media (prefers-reduced-motion:reduce) { .place,.motion-card { animation:none!important; }.field-grid,.route,.place,.field-orb { transition:none!important; } }

/* The navigation remains Symbio's own soft, translucent object. It glides away
   only while the visitor is moving deeper into the page and returns on intent. */

/* 2026 motion direction — an active local-signal field. The three objects move
   as one scene; each card contains its own smaller motion language. */
.motion-stage {
  position:relative;
  isolation:isolate;
  min-height:820px;
  padding:120px 0 130px;
  background:
    radial-gradient(circle at 77% 48%,rgba(69,134,118,.18),transparent 31%),
    linear-gradient(145deg,#0b1412 0%,#0c1815 56%,#101c19 100%);
}
.motion-stage:before { content:''; position:absolute; z-index:-1; inset:0; opacity:.42; background-image:linear-gradient(rgba(186,224,203,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(186,224,203,.035) 1px,transparent 1px); background-size:62px 62px; mask-image:linear-gradient(90deg,transparent 0,#000 29%,#000 100%); }
.motion-atmosphere { position:absolute; z-index:-1; inset:0; overflow:hidden; pointer-events:none; }
.motion-atmosphere span { position:absolute; border:1px solid rgba(138,218,198,.09); border-radius:50%; }
.motion-atmosphere span:nth-child(1) { width:720px; height:720px; right:-180px; top:48px; animation:atmosphere-spin 38s linear infinite; }
.motion-atmosphere span:nth-child(2) { width:510px; height:510px; right:-76px; top:151px; border-style:dashed; animation:atmosphere-spin 28s linear reverse infinite; }
.motion-atmosphere span:nth-child(3) { width:1080px; height:390px; left:-440px; bottom:-257px; border-color:rgba(203,243,126,.08); transform:rotate(11deg); }
.motion-shell { grid-template-columns:minmax(290px,.72fr) minmax(590px,1.28fr); gap:5%; }
.motion-intro { position:relative; z-index:4; }
.motion-intro>p:last-of-type { max-width:370px; }
.motion-readout { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; width:min(330px,100%); margin-top:52px; color:#789087; font:400 8px/1 var(--mono); letter-spacing:.12em; }
.motion-readout b { position:relative; height:1px; overflow:visible; background:rgba(174,205,190,.18); }
.motion-readout b:after { content:''; position:absolute; top:0; left:0; width:34%; height:1px; background:linear-gradient(90deg,transparent,var(--lime)); animation:readout-travel 2.8s cubic-bezier(.45,0,.55,1) infinite; }
.motion-readout b i { position:absolute; z-index:2; top:-2px; left:0; width:5px; height:5px; border-radius:50%; background:var(--lime); box-shadow:0 0 12px rgba(203,243,126,.8); animation:readout-dot 2.8s cubic-bezier(.45,0,.55,1) infinite; }
.motion-readout em { color:#a8bbb1; font-style:normal; }
.motion-deck { --deck-x:0px; --deck-y:0px; --deck-rx:0deg; --deck-ry:0deg; position:relative; min-height:620px; perspective:1500px; transform-style:preserve-3d; transform:rotateX(var(--deck-rx)) rotateY(var(--deck-ry)); transition:transform .9s cubic-bezier(.18,.78,.2,1); }
.motion-deck:before { content:''; position:absolute; z-index:-1; width:75%; aspect-ratio:1; left:18%; top:4%; border-radius:50%; border:1px solid rgba(158,221,197,.09); box-shadow:0 0 0 64px rgba(143,217,190,.018),0 0 0 132px rgba(143,217,190,.012); transform:translate3d(calc(var(--deck-x) * -.14),calc(var(--deck-y) * -.14),-80px); }
.deck-glow { left:21%; top:11%; width:66%; opacity:.86; transform:translate3d(calc(var(--deck-x) * -.32),calc(var(--deck-y) * -.32),-60px); transition:transform .95s cubic-bezier(.18,.78,.2,1); }
.signal-map { position:absolute; z-index:0; inset:0; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 0 8px rgba(138,218,198,.16)); transform:translate3d(calc(var(--deck-x) * -.12),calc(var(--deck-y) * -.12),-20px); transition:transform .95s cubic-bezier(.18,.78,.2,1); }
.signal-map circle { fill:var(--lime); opacity:.72; }
.signal-path { stroke:rgba(145,199,180,.28); stroke-width:1; stroke-dasharray:4 9; vector-effect:non-scaling-stroke; animation:signal-flow 12s linear infinite; }
.signal-path-b { stroke:rgba(203,243,126,.16); animation-duration:17s; animation-direction:reverse; }
.deck-coordinate { position:absolute; z-index:1; color:#60766d; font:400 7px/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.deck-coordinate-a { left:0; bottom:92px; }
.deck-coordinate-b { right:0; top:46px; writing-mode:vertical-rl; }
.card-anchor { position:absolute; z-index:2; width:262px; height:368px; transform:translate3d(var(--card-x,0),var(--card-y,0),var(--card-z,0)); transition:transform .85s cubic-bezier(.18,.78,.2,1),z-index 0s .2s; will-change:transform; }
.card-anchor:hover { z-index:8; transition-delay:0s; }
.card-anchor:hover .motion-card { scale:1.025; translate:0 -8px; border-color:rgba(230,250,239,.42); }
.card-anchor-a { --card-z:70px; left:4%; top:145px; }
.card-anchor-b { --card-z:25px; left:36%; top:32px; }
.card-anchor-c { --card-z:-18px; right:1%; top:178px; width:248px; height:342px; }
.motion-card { position:relative; inset:auto; width:100%; height:100%; padding:14px; border-color:rgba(235,248,239,.22); border-radius:23px 6px 23px 6px; transform-origin:50% 65%; transition:transform .7s cubic-bezier(.16,.8,.2,1),box-shadow .55s ease,border-color .4s ease,filter .4s ease; animation:none; }
.motion-card:after { content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 25%,transparent 68%,rgba(138,218,198,.07)); mix-blend-mode:screen; }
.motion-card-a { left:auto; top:auto; background:rgba(42,88,76,.91); transform:rotate(-9deg); animation:card-breathe-a 7.2s ease-in-out infinite; }
.motion-card-b { left:auto; top:auto; background:rgba(216,237,223,.96); transform:rotate(6deg); animation:card-breathe-b 8.1s ease-in-out -2.4s infinite; }
.motion-card-c { right:auto; top:auto; height:100%; background:rgba(25,55,47,.92); transform:rotate(12deg); animation:card-breathe-c 7.7s ease-in-out -4.5s infinite; }
.card-anchor:hover .motion-card-a { transform:translate3d(-8px,-22px,80px) rotate(-3deg) scale(1.035); }
.card-anchor:hover .motion-card-b { transform:translate3d(4px,-23px,80px) rotate(1deg) scale(1.035); }
.card-anchor:hover .motion-card-c { transform:translate3d(8px,-20px,80px) rotate(5deg) scale(1.035); }
.card-anchor:hover~.card-anchor .motion-card { filter:brightness(.76) saturate(.78); }
.card-art { height:260px; }
.card-anchor-c .card-art { height:235px; }
.art-a { isolation:isolate; background:linear-gradient(135deg,#dce6d7,#a9c0af); }
.art-a:before { content:''; position:absolute; z-index:4; inset:0; background:linear-gradient(106deg,transparent 0 42%,rgba(255,255,255,.22) 47%,transparent 53%); transform:translateX(-140%); animation:material-sweep 5.6s cubic-bezier(.4,0,.2,1) infinite; }
.art-a:after { z-index:0; width:48%; height:48%; top:12%; right:11%; animation:room-sun 6.4s ease-in-out infinite; }
.art-a>em { z-index:5; }
.room-plane { position:absolute; z-index:1; }
.room-plane-a { inset:0 48% 0 0; background:linear-gradient(116deg,rgba(44,77,66,.08),rgba(44,77,66,.28)); clip-path:polygon(0 0,100% 15%,84% 100%,0 100%); }
.room-plane-b { right:-12%; bottom:-7%; width:93%; height:39%; border-radius:50%; background:rgba(245,234,195,.66); transform:rotate(-13deg); animation:room-plane 7s ease-in-out infinite; }
.room-light { position:absolute; z-index:2; top:0; right:7%; width:2px; height:100%; background:linear-gradient(transparent,rgba(255,251,220,.9),transparent); transform:rotate(18deg); filter:blur(.5px); }
.art-caption { position:absolute!important; z-index:5; top:17px; right:14px; width:auto!important; height:auto!important; left:auto!important; bottom:auto!important; border:0!important; border-radius:0!important; background:none!important; color:#345348; transform:none!important; font:500 7px/1.45 var(--mono); letter-spacing:.1em; text-align:right; }
.art-b { background:#183f36; }
.art-b:after { inset:9%; border-color:rgba(203,243,126,.34); animation:signal-ring 4.6s ease-in-out infinite; }
.kinetic-copy { position:absolute; z-index:2; display:grid; inset:0; place-content:center; width:100%; color:#e6f2e9; text-align:center; animation:copy-primary 7.2s cubic-bezier(.76,0,.24,1) infinite; }
.kinetic-copy span { display:block; font:500 34px/.79 var(--serif); letter-spacing:-.07em; }
.kinetic-copy em { color:var(--lime); font-style:italic; }
.kinetic-copy-echo { color:#183f36; background:var(--mint); clip-path:inset(100% 0 0 0); animation:copy-echo 7.2s cubic-bezier(.76,0,.24,1) infinite; }
.kinetic-copy-echo em { color:#1f5e50; }
.scan-line { position:absolute; z-index:4; left:0; right:0; top:0; height:1px; background:var(--lime); box-shadow:0 0 14px rgba(203,243,126,.8); animation:scan-card 7.2s cubic-bezier(.76,0,.24,1) infinite; }
.art-c { display:grid; place-items:center; background:radial-gradient(circle at 50% 50%,#c5ecdf 0 5%,#abd9cb 6% 41%,#91c4b5 78%,#83b4a6 100%); }
.art-c:before { content:''; position:absolute; inset:0; opacity:.34; background-image:linear-gradient(rgba(18,69,57,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(18,69,57,.14) 1px,transparent 1px); background-size:19px 19px; }
.art-c>span { position:relative; inset:auto; width:auto; height:auto; border:0; background:none; }
.orbit { position:absolute; border:1px solid rgba(18,74,61,.62); border-radius:50%; animation:orbit-spin 7s linear infinite; }
.orbit i { position:absolute; top:50%; right:-3px; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:#164d40; box-shadow:0 0 0 4px rgba(232,255,242,.42); }
.orbit-a { width:196px; height:196px; }
.orbit-b { width:142px; height:142px; border-style:dashed; animation-duration:10s; animation-direction:reverse; }
.orbit-c { width:88px; height:88px; animation-duration:4.8s; }
.orbit-core { z-index:3; display:grid!important; place-items:center; width:50px!important; height:50px!important; border-radius:50%!important; background:#164d40!important; box-shadow:0 0 0 10px rgba(255,255,255,.12),0 0 26px rgba(24,78,65,.28); color:#d9f5e7; font:500 20px var(--serif); }
.orbit-label { position:absolute; z-index:4; right:12px; bottom:11px; color:#1d5a4c; font:500 7px/1.4 var(--mono); letter-spacing:.1em; text-align:right; }
.signal-chip { position:absolute; z-index:9; display:grid; align-items:center; border:1px solid rgba(222,242,229,.21); background:rgba(14,34,29,.76); box-shadow:0 14px 30px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.08); color:#a9bbb1; backdrop-filter:blur(14px); font:400 7px/1 var(--mono); letter-spacing:.1em; }
.signal-chip-a { grid-template-columns:8px 1fr auto; gap:8px; left:29%; bottom:79px; width:149px; padding:10px 11px; border-radius:12px 3px 12px 3px; animation:chip-float-a 5.1s ease-in-out infinite; }
.signal-chip-a i { width:5px; height:5px; border-radius:50%; background:var(--lime); box-shadow:0 0 10px rgba(203,243,126,.75); }
.signal-chip-a b { color:#dceae1; font-weight:500; }
.signal-chip-b { grid-template-columns:1fr auto; gap:15px; right:11%; top:96px; padding:10px 12px; border-radius:3px 12px 3px 12px; animation:chip-float-b 5.7s ease-in-out -1.7s infinite; }
.signal-chip-b b { color:var(--mint); font-weight:500; }
.pulse-core { position:absolute; z-index:1; left:52%; top:52%; width:17px; height:17px; transform:translate(-50%,-50%); }
.pulse-core span { position:absolute; inset:0; border:1px solid rgba(203,243,126,.58); border-radius:50%; animation:pulse-out 2.8s ease-out infinite; }
.pulse-core span:nth-child(2) { animation-delay:1.4s; }
.pulse-core i { position:absolute; inset:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 15px rgba(203,243,126,.8); }
.deck-tag { right:2px; bottom:23px; }
.motion-stage:not(.is-active) .motion-atmosphere span,
.motion-stage:not(.is-active) .motion-readout b:after,
.motion-stage:not(.is-active) .motion-readout b i,
.motion-stage:not(.is-active) .signal-path,
.motion-stage:not(.is-active) .motion-card,
.motion-stage:not(.is-active) .art-a:before,
.motion-stage:not(.is-active) .art-a:after,
.motion-stage:not(.is-active) .room-plane-b,
.motion-stage:not(.is-active) .kinetic-copy,
.motion-stage:not(.is-active) .kinetic-copy-echo,
.motion-stage:not(.is-active) .scan-line,
.motion-stage:not(.is-active) .art-b:after,
.motion-stage:not(.is-active) .orbit,
.motion-stage:not(.is-active) .signal-chip,
.motion-stage:not(.is-active) .pulse-core span { animation-play-state:paused; }

@keyframes atmosphere-spin { to { transform:rotate(360deg); } }
@keyframes signal-flow { to { stroke-dashoffset:-130; } }
@keyframes readout-travel { 0%,12% { transform:translateX(-15%); opacity:0; } 24%,73% { opacity:1; } 88%,100% { transform:translateX(200%); opacity:0; } }
@keyframes readout-dot { 0%,12% { left:0; opacity:0; } 24%,73% { opacity:1; } 88%,100% { left:calc(100% - 5px); opacity:0; } }
@keyframes card-breathe-a { 0%,100% { transform:rotate(-9deg) translateY(0); } 50% { transform:rotate(-6.5deg) translateY(-11px); } }
@keyframes card-breathe-b { 0%,100% { transform:rotate(6deg) translateY(0); } 50% { transform:rotate(8deg) translateY(10px); } }
@keyframes card-breathe-c { 0%,100% { transform:rotate(12deg) translateY(0); } 50% { transform:rotate(9.5deg) translateY(-9px); } }
@keyframes material-sweep { 0%,52% { transform:translateX(-140%); } 76%,100% { transform:translateX(140%); } }
@keyframes room-sun { 0%,100% { transform:translate(0,0) scale(1); filter:blur(2px); } 50% { transform:translate(-8px,8px) scale(1.08); filter:blur(5px); } }
@keyframes room-plane { 0%,100% { transform:rotate(-13deg) translateY(0); } 50% { transform:rotate(-10deg) translateY(-7px); } }
@keyframes copy-primary { 0%,36% { opacity:1; transform:translateY(0); filter:blur(0); } 46%,86% { opacity:.18; transform:translateY(-12px); filter:blur(5px); } 96%,100% { opacity:1; transform:none; filter:blur(0); } }
@keyframes copy-echo { 0%,34% { clip-path:inset(100% 0 0 0); } 48%,82% { clip-path:inset(0 0 0 0); } 96%,100% { clip-path:inset(0 0 100% 0); } }
@keyframes scan-card { 0%,34% { top:100%; opacity:0; } 40% { opacity:1; } 50%,82% { top:0; opacity:.7; } 96%,100% { top:100%; opacity:0; } }
@keyframes signal-ring { 0%,100% { transform:scale(.94) rotate(0); opacity:.45; } 50% { transform:scale(1.04) rotate(7deg); opacity:1; } }
@keyframes orbit-spin { to { transform:rotate(360deg); } }
@keyframes chip-float-a { 0%,100% { transform:translate3d(0,0,95px) rotate(-2deg); } 50% { transform:translate3d(-5px,-10px,95px) rotate(1deg); } }
@keyframes chip-float-b { 0%,100% { transform:translate3d(0,0,72px) rotate(2deg); } 50% { transform:translate3d(7px,9px,72px) rotate(-1deg); } }
@keyframes pulse-out { 0% { transform:scale(.4); opacity:0; } 20% { opacity:1; } 100% { transform:scale(4.6); opacity:0; } }

@media (max-width:1100px) and (min-width:761px) {
  .motion-shell { grid-template-columns:1fr; }
  .motion-intro { max-width:600px; }
  .motion-intro h2 { max-width:580px; }
  .motion-deck { width:min(760px,100%); margin:60px auto 0; }
}
@media (max-width:760px) {
  .motion-stage { min-height:auto; padding:92px 0 86px; }
  .motion-stage:before { mask-image:linear-gradient(180deg,transparent,#000 24%,#000 100%); background-size:44px 44px; }
  .motion-atmosphere span:nth-child(1) { width:520px; height:520px; right:-286px; top:325px; }
  .motion-atmosphere span:nth-child(2) { width:360px; height:360px; right:-204px; top:403px; }
  .motion-readout { margin-top:34px; }
  .motion-deck { width:calc(100% + 20px); min-height:512px; margin:50px -10px 0; transform:none!important; }
  .motion-deck:before { width:400px; left:5%; top:50px; }
  .signal-map { left:-7%; width:114%; }
  .deck-coordinate-a { left:4px; bottom:46px; }
  .deck-coordinate-b { right:6px; top:36px; }
  .card-anchor { width:194px; height:282px; }
  .card-anchor-a { left:-2%; top:142px; }
  .card-anchor-b { left:28%; top:35px; }
  .card-anchor-c { right:-7%; top:172px; width:182px; height:264px; }
  .motion-card { padding:10px; border-radius:18px 5px 18px 5px; }
  .card-art { height:193px; margin:9px 0; }
  .card-anchor-c .card-art { height:175px; }
  .card-top { grid-template-columns:20px 1fr 16px; font-size:6px; }
  .card-bottom strong { font-size:16px; }
  .card-bottom small { font-size:5px; }
  .art-a>em { left:12px; bottom:12px; font-size:80px; }
  .art-caption { top:12px; right:10px; font-size:5px; }
  .kinetic-copy span { font-size:24px; }
  .orbit-a { width:142px; height:142px; }.orbit-b { width:104px; height:104px; }.orbit-c { width:66px; height:66px; }
  .orbit-core { width:38px!important; height:38px!important; font-size:16px; }
  .signal-chip-a { left:8%; bottom:32px; }
  .signal-chip-b { right:0; top:102px; }
  .pulse-core { left:54%; top:54%; }
  .deck-tag { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .motion-atmosphere span,.motion-readout b:after,.motion-readout b i,.signal-path,.motion-card,.art-a:before,.art-a:after,.room-plane-b,.kinetic-copy,.kinetic-copy-echo,.scan-line,.art-b:after,.orbit,.signal-chip,.pulse-core span { animation:none!important; }
  .motion-deck,.deck-glow,.signal-map,.card-anchor { transform:none!important; transition:none!important; }
  .kinetic-copy-echo { display:none; }
  .scan-line { display:none; }
}

/* Keep load-settle and scroll visibility on separate transform layers. */
.nav { transform-origin:50% 0; animation:nav-object-in .72s cubic-bezier(.2,.8,.2,1) .12s both; }
.method-notes p { grid-column:2; }
@keyframes nav-object-in { from { opacity:0; transform:translateY(-18px) scale(.985); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .nav { animation:none; } }

/* Apptics-inspired hero principle: one clear claim, made physical by the moving system. */
.hero-field { isolation:isolate; background:linear-gradient(145deg,#fbfcf7 0%,#ebf4e4 55%,#d1e8c8 100%); }
.system-grid { position:absolute; z-index:-2; inset:-28%; opacity:.43; background-image:linear-gradient(rgba(29,99,67,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(29,99,67,.17) 1px,transparent 1px); background-size:34px 34px; transform:rotate(-9deg); }
.system-orbit { position:absolute; z-index:-1; border:1px solid rgba(36,111,74,.25); border-radius:50%; transform:translate3d(calc(var(--field-x,0px) * -.22),calc(var(--field-y,0px) * -.22),0); transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.system-orbit-a { width:620px; height:620px; right:-178px; top:-109px; box-shadow:0 0 0 55px rgba(144,213,152,.045),0 0 0 120px rgba(144,213,152,.025); }
.system-orbit-b { width:280px; height:280px; left:44px; bottom:-138px; border-style:dashed; animation:system-orbit 24s linear infinite; }
.site-object,.ai-object,.lead-token,.status-chip { transform:translate3d(calc(var(--field-x,0px) * var(--depth,1)),calc(var(--field-y,0px) * var(--depth,1)),0); transition:transform .9s cubic-bezier(.18,.78,.2,1); }
.site-object { --depth:.18; position:absolute; z-index:3; left:11%; top:24%; width:285px; min-height:315px; overflow:hidden; border:1px solid rgba(31,94,64,.25); border-radius:27px 8px 27px 8px; background:#f9fbf6; box-shadow:0 30px 55px rgba(29,80,51,.18),inset 0 1px rgba(255,255,255,.94); animation:site-float 7.4s cubic-bezier(.45,0,.55,1) infinite; }
.site-bar { display:flex; align-items:center; gap:5px; height:32px; padding:0 11px; border-bottom:1px solid rgba(30,83,58,.12); }.site-bar span { width:5px; height:5px; border-radius:50%; background:#a5caa5; }.site-bar span:nth-child(2) { background:#d6e39a; }.site-bar i { margin-left:auto; color:#63806d; font:400 7px var(--mono); letter-spacing:.04em; font-style:normal; }
.site-screen { position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:282px; padding:23px; overflow:hidden; background:linear-gradient(144deg,#f8f9f0,#d5ead2); }.site-screen p { position:relative; z-index:2; max-width:172px; color:#183d2d; font:500 38px/.81 var(--serif); letter-spacing:-.075em; }.site-screen p em { color:#328064; }.site-screen small { position:relative; z-index:2; color:#466451; font:500 7px var(--mono); letter-spacing:.1em; text-transform:uppercase; }.site-screen>b { position:absolute; z-index:2; right:19px; bottom:17px; display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:#174d39; box-shadow:0 8px 14px rgba(16,59,42,.22); color:#f3faee; font-size:15px; }.site-sun { position:absolute; right:-30px; bottom:-32px; width:185px; height:185px; border-radius:50%; background:radial-gradient(circle at 35% 34%,#fff6b7 0%,#d2ec72 24%,#8bcf9d 50%,transparent 71%); animation:site-sun 7.4s ease-in-out infinite; }
.lead-token { --depth:.62; position:absolute; z-index:6; display:flex; align-items:center; gap:8px; left:44%; top:33%; min-width:124px; padding:10px 11px; border:1px solid rgba(24,87,60,.2); border-radius:13px 4px 13px 4px; background:rgba(253,254,249,.82); box-shadow:0 12px 25px rgba(32,82,57,.13),inset 0 1px rgba(255,255,255,.95); backdrop-filter:blur(12px); color:#3d6652; font:500 7px var(--mono); letter-spacing:.11em; animation:lead-drift 5.6s ease-in-out infinite; }.lead-token i,.status-chip i { width:6px; height:6px; border-radius:50%; background:#a9dc59; box-shadow:0 0 0 4px rgba(169,220,89,.19),0 0 15px rgba(130,197,79,.7); }.lead-token b { margin-left:auto; color:#1d5c43; font-weight:500; }
.flow-line { position:absolute; z-index:2; left:46%; top:46%; width:190px; height:136px; border:1px solid rgba(30,101,66,.32); border-left:0; border-bottom:0; border-radius:0 120px 0 0; transform:rotate(11deg); }.flow-line:before { content:''; position:absolute; right:-4px; bottom:-3px; width:7px; height:7px; border-radius:50%; background:#91ce6d; box-shadow:0 0 0 5px rgba(145,206,109,.14); }.flow-line i { position:absolute; width:9px; height:9px; border-radius:50%; background:#d7f477; box-shadow:0 0 18px rgba(159,218,96,.9); animation:flow-through 4.8s cubic-bezier(.47,0,.35,1) infinite; }
.ai-object { --depth:.4; position:absolute; z-index:4; right:7%; bottom:12%; width:218px; height:258px; padding:13px; overflow:hidden; border:1px solid rgba(18,74,52,.34); border-radius:24px 7px 24px 7px; background:linear-gradient(148deg,#1c6045,#113d2e); box-shadow:0 28px 50px rgba(25,74,50,.27),inset 0 1px rgba(255,255,255,.18); color:#eaf8ea; animation:ai-float 8.6s ease-in-out -2s infinite; }.ai-object:after { content:''; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,.16),transparent 28%,transparent 70%,rgba(158,236,152,.11)); pointer-events:none; }.ai-object-top { position:relative; z-index:2; display:grid; grid-template-columns:22px 1fr auto; gap:6px; padding-bottom:10px; border-bottom:1px solid rgba(239,255,238,.2); color:#d7f6db; font:500 7px var(--mono); letter-spacing:.08em; }.ai-object-top span { color:#bdf17b; }.ai-object-top i { font-style:normal; color:#bdf17b; }.ai-core { position:relative; z-index:1; display:grid; place-items:center; width:160px; height:160px; margin:11px auto 5px; border:1px solid rgba(203,244,122,.35); border-radius:50%; box-shadow:0 0 0 20px rgba(174,228,139,.04),0 0 0 47px rgba(174,228,139,.025); }.ai-core:before,.ai-core:after { content:''; position:absolute; border:1px dashed rgba(202,245,122,.32); border-radius:50%; animation:ai-spin 10s linear infinite; }.ai-core:before { inset:18px; }.ai-core:after { inset:42px; animation-duration:5.2s; animation-direction:reverse; }.ai-core>span { position:relative; z-index:2; color:#f0faef; font:500 29px/.78 var(--serif); letter-spacing:-.07em; text-align:center; }.ai-core em { color:#c7f271; }.ai-core>i { position:absolute; z-index:3; top:15px; right:22px; width:8px; height:8px; border-radius:50%; background:#c8f171; box-shadow:0 0 0 5px rgba(200,241,113,.15),0 0 17px rgba(200,241,113,.85); }.ai-object p { position:relative; z-index:2; margin:0; color:#b7d9bd; font:400 7px/1.4 var(--mono); letter-spacing:.05em; text-align:center; }.ai-object p strong { color:#d7f889; font-weight:500; }
.status-chip { --depth:.72; position:absolute; z-index:7; right:25%; top:20%; display:grid; grid-template-columns:7px 1fr auto; align-items:center; gap:8px; padding:10px 11px; border:1px solid rgba(25,90,63,.2); border-radius:4px 13px 4px 13px; background:rgba(253,254,250,.84); box-shadow:0 12px 24px rgba(29,80,52,.12); color:#506b5b; font:500 7px var(--mono); letter-spacing:.1em; animation:chip-lift 5.2s ease-in-out -1.3s infinite; }.status-chip b { color:#1a754e; font-weight:500; }
.hero-field .field-top { top:22px; left:23px; color:#345d49; }.hero-field .field-bottom { right:21px; bottom:18px; color:#315c48; }

/* Standard Autopilot signature footer: quiet utility over a huge ghost brand. */
.footer { position:relative; width:100%; max-width:none; min-height:365px; padding:143px 0 31px; overflow:hidden; border-top:1px solid var(--line); background:#f4f7f1; color:#50645a; }
.footer-wordmark { position:absolute; z-index:0; left:50%; bottom:-.17em; width:max-content; transform:translateX(-50%); color:#e5ece1; font:600 clamp(115px,17vw,270px)/.72 var(--sans); letter-spacing:-.105em; white-space:nowrap; user-select:none; }.footer-wordmark span { color:#dfebd7; }
.footer-inner { position:relative; z-index:1; display:grid; grid-template-columns:1fr minmax(260px,430px) 1fr; align-items:end; gap:30px; }.footer-inner>p { max-width:330px; margin:0; color:#64746b; font-size:11px; line-height:1.45; }.footer-links { display:flex; justify-content:flex-end; gap:23px; font-size:11px; }.footer-links a { padding-bottom:3px; border-bottom:1px solid transparent; transition:border-color .2s,color .2s; }.footer-links a:hover { color:var(--forest); border-color:var(--forest); }

@keyframes system-orbit { to { transform:rotate(360deg); } }
@keyframes site-float { 0%,100% { transform:translate3d(calc(var(--field-x,0px) * var(--depth)),calc(var(--field-y,0px) * var(--depth)),0) rotate(-8deg); } 50% { transform:translate3d(calc(var(--field-x,0px) * var(--depth)),calc(var(--field-y,0px) * var(--depth) - 11px),0) rotate(-5deg); } }
@keyframes ai-float { 0%,100% { transform:translate3d(calc(var(--field-x,0px) * var(--depth)),calc(var(--field-y,0px) * var(--depth)),0) rotate(8deg); } 50% { transform:translate3d(calc(var(--field-x,0px) * var(--depth)),calc(var(--field-y,0px) * var(--depth) + 9px),0) rotate(5deg); } }
@keyframes site-sun { 0%,100% { transform:translate(-1px,0) scale(1); filter:blur(1px); } 50% { transform:translate(-10px,-5px) scale(1.08); filter:blur(5px); } }
@keyframes lead-drift { 0%,100% { translate:0 0; } 50% { translate:7px -9px; } }
@keyframes chip-lift { 0%,100% { translate:0 0; } 50% { translate:-5px 8px; } }
@keyframes flow-through { 0%,12% { left:-5px; top:124px; opacity:0; scale:.45; } 24% { opacity:1; } 68% { left:176px; top:-4px; opacity:1; scale:1; } 84%,100% { left:180px; top:-8px; opacity:0; scale:.45; } }
@keyframes ai-spin { to { transform:rotate(360deg); } }

@media (max-width:760px) {
  .hero-field { height:470px; }
  .site-object { left:4%; top:24%; width:218px; min-height:241px; border-radius:21px 6px 21px 6px; }.site-bar { height:27px; }.site-screen { min-height:214px; padding:18px; }.site-screen p { max-width:135px; font-size:30px; }.site-sun { width:145px; height:145px; }.site-screen>b { right:14px; bottom:13px; width:27px; height:27px; }
  .lead-token { left:42%; top:27%; min-width:104px; padding:8px 9px; font-size:6px; }.flow-line { left:43%; top:46%; width:149px; height:103px; }.ai-object { right:-3%; bottom:8%; width:169px; height:202px; padding:10px; border-radius:18px 5px 18px 5px; }.ai-object-top { grid-template-columns:16px 1fr auto; padding-bottom:7px; font-size:5px; }.ai-core { width:122px; height:122px; margin:9px auto 3px; }.ai-core>span { font-size:23px; }.ai-object p { font-size:5px; }.status-chip { right:11%; top:14%; padding:8px 9px; font-size:6px; }.system-orbit-a { width:480px; height:480px; right:-208px; top:-45px; }.system-orbit-b { left:-73px; bottom:-164px; }
  .footer { min-height:260px; padding:89px 0 27px; }.footer-wordmark { bottom:-.1em; font-size:clamp(78px,21vw,118px); }.footer-inner { grid-template-columns:1fr auto; gap:22px 16px; }.footer-inner>p { grid-column:1/-1; grid-row:2; max-width:270px; font-size:10px; }.footer-links { gap:13px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { .system-orbit-b,.site-object,.ai-object,.lead-token,.status-chip,.site-sun,.flow-line i,.ai-core:before,.ai-core:after { animation:none!important; } }

/* Light signal field — the work is tangible: a better arrival and a faster next step. */
:root { --paper:#f4f7f1; --paper-deep:#e1e9dd; --ink:#10251e; --quiet:#52645a; --forest:#185440; --moss:#66816b; --mint:#9bdac1; --lime:#c3f06e; --line:rgba(16,37,30,.16); }
.hero-field {
  background:linear-gradient(137deg,#fbfcf8 0%,#e5f0e2 52%,#c6dcc4 100%);
  color:#173f31;
  border:1px solid rgba(24,84,64,.16);
  box-shadow:inset 0 1px rgba(255,255,255,.92),0 26px 65px rgba(31,77,55,.15);
}
.field-grid { opacity:.38; background-image:linear-gradient(rgba(31,99,73,.21) 1px,transparent 1px),linear-gradient(90deg,rgba(31,99,73,.21) 1px,transparent 1px); }
.field-top,.field-bottom { color:#315948; }
.route { border-color:rgba(35,113,79,.42); box-shadow:0 0 40px rgba(155,218,193,.16); }
.place {
  border-color:rgba(25,82,64,.28);
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(218,237,217,.72));
  box-shadow:inset 0 1px rgba(255,255,255,.9),0 19px 32px rgba(30,87,61,.16);
  color:#153e2e;
}
.place p { color:#477160; }.place small { color:#4d7060; }.place span { background:#a5dd59; box-shadow:0 0 0 4px rgba(165,221,89,.17); }
.field-orb { width:335px; height:335px; right:-144px; top:-116px; background:radial-gradient(circle at 36% 38%,rgba(255,249,198,.98),rgba(195,240,110,.82) 23%,rgba(133,205,167,.44) 48%,transparent 70%); filter:blur(5px); }

.motion-stage {
  background:linear-gradient(143deg,#f7faf4 0%,#edf5e7 47%,#d9ead7 100%);
  color:var(--ink);
  border-top:1px solid rgba(22,75,56,.12);
  border-bottom:1px solid rgba(22,75,56,.12);
}
.motion-stage:before { opacity:.62; background-image:linear-gradient(rgba(25,93,65,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(25,93,65,.13) 1px,transparent 1px); }
.motion-stage:after { content:''; position:absolute; z-index:-1; width:680px; aspect-ratio:1; right:-210px; top:55px; border-radius:50%; background:radial-gradient(circle,rgba(198,241,111,.5),rgba(153,222,191,.17) 38%,transparent 69%); filter:blur(8px); }
.motion-atmosphere span { border-color:rgba(29,105,73,.2); box-shadow:0 0 0 70px rgba(102,167,126,.025),0 0 0 145px rgba(102,167,126,.018); }
.motion-stage .eyebrow,.motion-intro>p:last-of-type { color:#496557; }
.motion-intro h2 { color:#143727; }.motion-intro h2 em { color:#2f8165; }
.motion-readout { color:#476757; border-color:rgba(27,89,65,.22); }.motion-readout b { background:rgba(29,91,67,.18); }.motion-readout b:after { background:linear-gradient(90deg,transparent,#5ab688,transparent); }.motion-readout em { color:#547164; }
.motion-deck:before { border-color:rgba(27,101,72,.22); box-shadow:0 0 0 64px rgba(86,163,113,.045),0 0 0 132px rgba(86,163,113,.028); }
.deck-glow { background:radial-gradient(circle,rgba(193,240,110,.72),rgba(135,217,177,.28) 38%,transparent 69%); filter:blur(12px); }
.signal-map { filter:drop-shadow(0 0 8px rgba(32,116,78,.18)); }.signal-map circle { fill:#74b66f; }.signal-path { stroke:rgba(29,109,74,.43); }.signal-path-b { stroke:rgba(97,157,80,.38); }
.deck-coordinate { color:#527261; }
.motion-card { border-color:rgba(20,79,58,.22); box-shadow:0 26px 55px rgba(28,76,54,.2),inset 0 1px rgba(255,255,255,.7); }
.motion-card:after { background:linear-gradient(115deg,rgba(255,255,255,.5),transparent 25%,transparent 68%,rgba(141,215,177,.17)); mix-blend-mode:normal; }
.card-anchor:hover .motion-card { border-color:rgba(20,98,69,.52); box-shadow:0 32px 70px rgba(28,76,54,.28),inset 0 1px rgba(255,255,255,.8); }
.motion-card-a { background:linear-gradient(145deg,#f5f8ed,#c4ddbf); color:#173e2e; }
.motion-card-b { background:linear-gradient(145deg,#1a573f,#113b2e); color:#edf8ef; }
.motion-card-c { background:linear-gradient(145deg,#f9fbf5,#d5ead2); color:#173e2e; }
.card-top { color:inherit; border-bottom-color:rgba(30,81,59,.2); }.motion-card-b .card-top { border-bottom-color:rgba(234,251,239,.2); }.card-top span { color:#4a755f; }.motion-card-b .card-top span { color:#aee8c8; }
.card-bottom { color:inherit; }.card-bottom small { color:#52715f; }.motion-card-b .card-bottom small { color:#b7d5c1; }
.art-a { background:linear-gradient(135deg,#f7f8ee,#b8d5b6); }.room-plane-a { background:linear-gradient(116deg,rgba(27,81,58,.04),rgba(27,81,58,.23)); }.room-plane-b { background:rgba(244,232,178,.78); }.art-caption { color:#2a5946; }
.art-b { background:#124934; }.art-b:after { border-color:rgba(195,240,110,.53); }.kinetic-copy { color:#f0faef; }.kinetic-copy-echo { color:#184d39; background:#bbebb4; }.kinetic-copy-echo em { color:#26745a; }
.art-c { background:radial-gradient(circle at 50% 50%,#f5f9ea 0 5%,#d7eccb 6% 41%,#b2d9af 78%,#9fc998 100%); }.art-c:before { background-image:linear-gradient(rgba(18,79,56,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(18,79,56,.15) 1px,transparent 1px); }.orbit { border-color:rgba(21,91,61,.6); }.orbit i { background:#1b654a; box-shadow:0 0 0 4px rgba(255,255,255,.65); }.orbit-core { background:#1a6549!important; color:#eff9eb; }.orbit-label { color:#235a43; }
.signal-chip { border-color:rgba(26,87,63,.22); background:rgba(249,252,246,.78); box-shadow:0 14px 30px rgba(35,82,60,.15),inset 0 1px rgba(255,255,255,.9); color:#486756; }.signal-chip-a b { color:#28634c; }.signal-chip-b b { color:#167153; }.pulse-core span { border-color:rgba(45,135,83,.6); }.pulse-core i { background:#86c95e; box-shadow:0 0 15px rgba(115,192,86,.72); }

/* Keep the new hero's orbital system inside its luminous artboard. */
.system-grid { z-index:0; }.system-orbit { z-index:1; }.site-object { z-index:3; }.ai-object { z-index:4; }.lead-token { z-index:6; }.status-chip { z-index:7; }

/* Centered hero proof — one finite service story, then a settled product view. */
.hero {
  display:block;
  min-height:auto;
  padding:170px 0 112px;
  text-align:center;
}
.hero-copy { max-width:1120px; margin-inline:auto; }
.hero-eyebrow { margin-bottom:24px; }
.hero h1 { margin:0 auto 28px; font-size:clamp(70px,8.1vw,126px); line-height:.83; text-wrap:balance; }
.hero h1 em { color:#3f806b; }
.hero .lede { max-width:645px; margin:0 auto 28px; color:#50625a; font-size:clamp(15px,1.25vw,18px); line-height:1.55; text-wrap:balance; }
.hero-action { display:inline-flex; align-items:center; gap:25px; padding:14px 17px 14px 19px; border:1px solid rgba(15,53,41,.2); border-radius:15px; background:linear-gradient(145deg,#285c49,#123e30); box-shadow:inset 0 1px rgba(255,255,255,.22),0 8px 20px rgba(25,67,51,.16); color:#f4faf5; font-size:11px; font-weight:600; transition:transform .25s,box-shadow .25s; }
.hero-action:hover { transform:translateY(-2px); box-shadow:inset 0 1px rgba(255,255,255,.25),0 13px 27px rgba(25,67,51,.2); }
.hero-action span { color:var(--lime); font-size:17px; line-height:0; }
.hero-proof { width:min(1080px,100%); margin:82px auto 0; text-align:left; }
.proof-steps { display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; gap:16px; width:min(920px,calc(100% - 64px)); margin:0 auto 22px; color:#64766d; font:500 8px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase; }
.proof-steps>span { display:flex; align-items:center; gap:8px; transition:color .35s; }
.proof-steps>span>i { display:grid; place-items:center; width:22px; height:22px; border:1px solid rgba(28,81,61,.2); border-radius:50%; font-style:normal; letter-spacing:0; }
.proof-steps>b { position:relative; height:1px; overflow:hidden; background:rgba(25,76,57,.14); }
.proof-steps>b>i { position:absolute; inset:0; background:linear-gradient(90deg,#78b784,var(--lime)); transform:scaleX(0); transform-origin:left; }
.proof-stage { --lead-x:245px; --lead-y:-112px; position:relative; isolation:isolate; height:575px; overflow:hidden; border:1px solid rgba(25,78,59,.17); border-radius:36px 10px 36px 10px; background:linear-gradient(145deg,#f9fbf6 0%,#e5efe0 55%,#c9ddc4 100%); box-shadow:inset 0 1px rgba(255,255,255,.9),0 34px 80px rgba(30,73,53,.14); }
.proof-stage:before { content:''; position:absolute; z-index:-1; width:620px; height:620px; right:-185px; top:-175px; border-radius:50%; background:radial-gradient(circle at 42% 42%,rgba(246,249,199,.94),rgba(190,235,110,.58) 23%,rgba(120,201,159,.22) 48%,transparent 70%); filter:blur(5px); }
.proof-stage:after { content:''; position:absolute; z-index:-1; width:610px; height:240px; left:-220px; bottom:-162px; border:1px solid rgba(37,111,79,.16); border-radius:50%; transform:rotate(8deg); box-shadow:0 0 0 58px rgba(77,147,104,.035),0 0 0 126px rgba(77,147,104,.022); }
.proof-grid { position:absolute; z-index:-2; inset:-26%; opacity:.32; background-image:linear-gradient(rgba(31,96,70,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(31,96,70,.16) 1px,transparent 1px); background-size:38px 38px; transform:rotate(-7deg); }
.proof-coordinate { position:absolute; z-index:1; margin:0; color:#527062; font:400 7px/1.4 var(--mono); letter-spacing:.11em; text-transform:uppercase; }
.proof-coordinate-a { left:20px; bottom:18px; }
.proof-coordinate-b { right:18px; bottom:18px; }
.proof-site { position:absolute; z-index:3; left:6%; top:62px; width:59%; height:412px; overflow:hidden; border:1px solid rgba(21,73,54,.22); border-radius:28px 7px 28px 7px; background:#f6f8f2; box-shadow:0 28px 54px rgba(33,75,55,.18),inset 0 1px rgba(255,255,255,.96); transform-origin:50% 90%; }
.proof-site-bar { position:relative; z-index:8; display:flex; align-items:center; gap:6px; height:35px; padding:0 13px; border-bottom:1px solid rgba(29,76,59,.12); background:rgba(249,251,247,.92); }
.proof-site-bar>span { width:6px; height:6px; border-radius:50%; background:#aab5ad; }
.proof-site-bar>i { margin:auto; color:#718078; font:400 7px var(--mono); font-style:normal; }
.proof-site-bar>b { color:#2c7455; font:500 6px var(--mono); letter-spacing:.1em; }
.proof-site-before,.proof-site-after { position:absolute; inset:35px 0 0; padding:34px; }
.proof-site-before { z-index:1; background:linear-gradient(145deg,#e8ebe6,#d6dcd6); color:#647069; }
.proof-site-before small,.proof-site-after small { display:block; margin-bottom:47px; font:500 7px var(--mono); letter-spacing:.12em; }
.proof-site-before strong { display:block; font:500 49px/.88 var(--serif); letter-spacing:-.07em; }
.proof-site-before>div { display:grid; gap:8px; width:40%; margin-top:37px; }
.proof-site-before>div i { height:6px; border-radius:10px; background:rgba(72,87,78,.16); }
.proof-site-before>div i:nth-child(2) { width:84%; }.proof-site-before>div i:nth-child(3) { width:62%; }
.proof-site-after { z-index:2; overflow:hidden; background:linear-gradient(132deg,#f3f7ee 0%,#dcebdd 61%,#c3ddc0 100%); color:#173a2c; clip-path:inset(0 100% 0 0); }
.proof-site-after strong { position:relative; z-index:2; display:block; font:500 64px/.79 var(--serif); letter-spacing:-.075em; }
.proof-site-after strong em { color:#397c61; }
.proof-site-cta { position:absolute; z-index:3; display:flex; align-items:center; gap:29px; left:34px; bottom:30px; padding:10px 10px 10px 14px; border:1px solid rgba(20,68,51,.18); border-radius:12px; background:rgba(251,253,248,.66); box-shadow:inset 0 1px rgba(255,255,255,.8); font-size:8px; font-weight:600; }
.proof-site-cta b { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; background:#205a43; color:#d9f5aa; font-size:13px; }
.proof-site-sun { position:absolute; z-index:1; right:-64px; bottom:-92px; width:310px; height:310px; border-radius:50%; background:radial-gradient(circle at 36% 33%,#f2df9a,#bad6aa 48%,#72a88d 70%); }
.proof-wipe { position:absolute; z-index:7; inset:35px 0 0; overflow:hidden; background:linear-gradient(90deg,rgba(35,98,71,.94),rgba(89,157,109,.87)); transform:translateX(-102%); }
.proof-wipe:after { content:''; position:absolute; top:0; right:-3px; width:4px; height:100%; background:var(--lime); box-shadow:0 0 28px rgba(203,243,126,.9); }
.proof-wipe span { position:absolute; right:18px; top:18px; color:#e6f1e8; font:500 7px var(--mono); letter-spacing:.12em; }
.proof-route { position:absolute; z-index:2; left:48%; top:180px; width:39%; height:160px; overflow:visible; }
.proof-route path { stroke:rgba(30,101,69,.42); stroke-width:1; stroke-dasharray:5 7; vector-effect:non-scaling-stroke; stroke-dashoffset:410; }
.proof-lead { position:absolute; z-index:8; display:flex; align-items:center; gap:8px; left:53%; top:56%; min-width:132px; padding:10px 11px; border:1px solid rgba(25,84,60,.22); border-radius:13px 4px 13px 4px; background:rgba(252,254,249,.92); box-shadow:0 14px 28px rgba(32,80,56,.16),inset 0 1px rgba(255,255,255,.9); color:#3e6753; font:500 7px/1 var(--mono); letter-spacing:.1em; opacity:0; }
.proof-lead i,.proof-settled i,.followup-ready i { width:6px; height:6px; flex:0 0 auto; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(174,224,96,.18),0 0 13px rgba(142,204,77,.65); }
.proof-lead b { margin-left:auto; color:#1f6247; font-weight:500; }
.proof-followup { position:absolute; z-index:6; right:5%; top:114px; width:29%; height:330px; padding:14px; overflow:hidden; border:1px solid rgba(15,68,47,.32); border-radius:26px 7px 26px 7px; background:linear-gradient(148deg,#1d5a43,#103a2d); box-shadow:0 30px 58px rgba(24,70,47,.24),inset 0 1px rgba(255,255,255,.18); color:#e8f5e9; opacity:0; transform:translateY(23px) scale(.96); transform-origin:50% 80%; }
.followup-head { display:grid; grid-template-columns:21px 1fr auto; gap:7px; padding-bottom:11px; border-bottom:1px solid rgba(232,251,235,.2); font:500 7px var(--mono); letter-spacing:.09em; }
.followup-head span,.followup-head i { color:var(--lime); font-style:normal; }
.followup-contact { display:grid; grid-template-columns:39px 1fr auto; gap:10px; align-items:center; padding:17px 0 13px; }
.followup-contact>span { display:grid; place-items:center; width:39px; height:39px; border-radius:13px; background:rgba(220,247,221,.12); color:#d8f487; font:500 19px var(--serif); }
.followup-contact p { display:grid; gap:4px; margin:0; }.followup-contact p b { font-size:10px; font-weight:600; }.followup-contact p small { color:#a6c9b0; font:400 6px var(--mono); letter-spacing:.04em; }
.followup-contact>i { align-self:start; color:#a7d8b5; font:400 6px var(--mono); font-style:normal; }
.followup-message { position:relative; min-height:142px; padding:17px; border:1px solid rgba(220,247,221,.15); border-radius:16px 4px 16px 4px; background:rgba(9,42,31,.25); }
.followup-message>span { display:block; height:5px; margin-bottom:7px; border-radius:10px; background:rgba(217,242,219,.17); transform:scaleX(0); transform-origin:left; }
.followup-message>span:nth-child(2) { width:84%; }.followup-message>span:nth-child(3) { width:62%; }
.followup-message p { margin:20px 0 0; color:#dcecdf; font:400 9px/1.5 var(--sans); opacity:0; transform:translateY(7px); }
.followup-ready { display:grid; grid-template-columns:7px 1fr auto; align-items:center; gap:8px; margin-top:13px; color:#b9d7bf; font:400 6px var(--mono); letter-spacing:.07em; opacity:0; }
.followup-ready b { color:#d7f284; font-weight:500; }
.proof-settled { position:absolute; z-index:9; display:grid; grid-template-columns:7px 1fr auto; align-items:center; gap:9px; left:50%; bottom:18px; width:238px; padding:11px 12px; border:1px solid rgba(25,84,60,.2); border-radius:13px 4px 13px 4px; background:rgba(251,253,248,.86); box-shadow:0 14px 29px rgba(32,80,56,.14),inset 0 1px rgba(255,255,255,.9); backdrop-filter:blur(12px); color:#527061; font:500 7px var(--mono); letter-spacing:.08em; opacity:0; transform:translate(-50%,8px); }
.proof-settled b { color:#23674b; font-weight:500; }

.hero-proof.is-playing .proof-site { animation:proof-site-arrive .9s cubic-bezier(.18,.8,.2,1) .15s both; }
.hero-proof.is-playing .proof-wipe { animation:proof-wipe 1.25s cubic-bezier(.72,0,.24,1) 1.25s both; }
.hero-proof.is-playing .proof-site-after { animation:proof-reveal .78s cubic-bezier(.72,0,.24,1) 1.7s both; }
.hero-proof.is-playing .proof-route path { animation:proof-route 1s cubic-bezier(.3,0,.25,1) 2.55s both; }
.hero-proof.is-playing .proof-lead { animation:proof-lead 1.25s cubic-bezier(.28,.72,.22,1) 2.75s both; }
.hero-proof.is-playing .proof-followup { animation:proof-followup .7s cubic-bezier(.18,.8,.2,1) 3.42s both; }
.hero-proof.is-playing .followup-message>span { animation:proof-line .48s ease 4.05s both; }
.hero-proof.is-playing .followup-message>span:nth-child(2) { animation-delay:4.16s; }.hero-proof.is-playing .followup-message>span:nth-child(3) { animation-delay:4.27s; }
.hero-proof.is-playing .followup-message p { animation:proof-copy .55s cubic-bezier(.2,.8,.2,1) 4.42s both; }
.hero-proof.is-playing .followup-ready { animation:proof-ready .5s ease 4.86s both; }
.hero-proof.is-playing .proof-settled { animation:proof-settle .62s cubic-bezier(.18,.8,.2,1) 5.22s both; }
.hero-proof.is-playing .proof-steps>span:nth-of-type(1) { animation:proof-step .6s ease .25s both; }
.hero-proof.is-playing .proof-steps>b:nth-of-type(1)>i { animation:proof-progress 1.3s ease 1.25s both; }
.hero-proof.is-playing .proof-steps>span:nth-of-type(2) { animation:proof-step .6s ease 2.55s both; }
.hero-proof.is-playing .proof-steps>b:nth-of-type(2)>i { animation:proof-progress 1.25s ease 2.7s both; }
.hero-proof.is-playing .proof-steps>span:nth-of-type(3) { animation:proof-step .6s ease 4.05s both; }

@keyframes proof-site-arrive { from { opacity:0; transform:translateY(34px) scale(.96) rotate(-1.5deg); filter:blur(8px); } to { opacity:1; transform:none; filter:none; } }
@keyframes proof-wipe { 0% { transform:translateX(-102%); } 48% { transform:translateX(0); } 100% { transform:translateX(102%); } }
@keyframes proof-reveal { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0); } }
@keyframes proof-route { from { stroke-dashoffset:410; opacity:0; } to { stroke-dashoffset:0; opacity:1; } }
@keyframes proof-lead { 0% { opacity:0; transform:translate(0,10px) scale(.82); } 18% { opacity:1; transform:translate(0,0) scale(1); } 76% { opacity:1; transform:translate(var(--lead-x),var(--lead-y)) scale(.92); } 100% { opacity:0; transform:translate(var(--lead-x),var(--lead-y)) scale(.35); } }
@keyframes proof-followup { from { opacity:0; transform:translateY(23px) scale(.96); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
@keyframes proof-line { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes proof-copy { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
@keyframes proof-ready { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@keyframes proof-settle { from { opacity:0; transform:translate(-50%,8px) scale(.96); } to { opacity:1; transform:translate(-50%,0) scale(1); } }
@keyframes proof-step { from { color:#64766d; } to { color:#1f6048; } }
@keyframes proof-progress { to { transform:scaleX(1); } }

@media (max-width:760px) {
  .hero { padding:137px 0 77px; }
  .hero h1 { font-size:clamp(41px,12.2vw,58px); line-height:.84; }
  .hero-eyebrow { max-width:290px; margin-inline:auto; }
  .hero .lede { max-width:345px; font-size:15px; }
  .hero-proof { margin-top:59px; }
  .proof-steps { grid-template-columns:repeat(3,1fr); gap:6px; width:100%; margin-bottom:13px; }
  .proof-steps>span { display:grid; justify-items:center; gap:6px; text-align:center; font-size:5px; line-height:1.25; }
  .proof-steps>span>i { width:19px; height:19px; }
  .proof-steps>b { display:none; }
  .proof-stage { --lead-x:38px; --lead-y:88px; height:590px; border-radius:27px 7px 27px 7px; }
  .proof-stage:before { width:430px; height:430px; right:-255px; top:-100px; }
  .proof-grid { background-size:29px 29px; }
  .proof-coordinate-a { left:13px; bottom:12px; }.proof-coordinate-b { display:none; }
  .proof-site { left:5%; top:32px; width:90%; height:318px; border-radius:21px 6px 21px 6px; }
  .proof-site-bar { height:29px; padding-inline:10px; }
  .proof-site-before,.proof-site-after { inset:29px 0 0; padding:23px; }
  .proof-site-before small,.proof-site-after small { margin-bottom:30px; font-size:6px; }
  .proof-site-before strong { font-size:38px; }.proof-site-before>div { margin-top:25px; }
  .proof-site-after strong { font-size:47px; }
  .proof-site-cta { left:23px; bottom:21px; }
  .proof-site-sun { right:-80px; bottom:-104px; width:235px; height:235px; }
  .proof-wipe { inset:29px 0 0; }
  .proof-route { left:47%; top:246px; width:44%; height:155px; transform:rotate(54deg); transform-origin:0 100%; }
  .proof-lead { left:48%; top:44%; min-width:112px; padding:8px 9px; font-size:6px; }
  .proof-followup { right:5%; top:315px; width:78%; height:239px; padding:11px; border-radius:20px 5px 20px 5px; }
  .followup-head { padding-bottom:8px; font-size:6px; }
  .followup-contact { grid-template-columns:33px 1fr auto; padding:11px 0 9px; }.followup-contact>span { width:33px; height:33px; }
  .followup-message { min-height:93px; padding:11px; }.followup-message p { margin-top:10px; font-size:8px; }
  .followup-ready { margin-top:9px; }
  .proof-settled { left:50%; bottom:13px; width:215px; padding:9px 10px; font-size:6px; }
}

@media (prefers-reduced-motion:reduce) {
  .hero-proof .proof-site,.hero-proof .proof-wipe,.hero-proof .proof-site-after,.hero-proof .proof-route path,.hero-proof .proof-lead,.hero-proof .proof-followup,.hero-proof .followup-message>span,.hero-proof .followup-message p,.hero-proof .followup-ready,.hero-proof .proof-settled,.hero-proof .proof-steps * { animation:none!important; transition:none!important; }
  .hero-proof .proof-site { opacity:1; transform:none; filter:none; }
  .hero-proof .proof-wipe,.hero-proof .proof-lead { display:none; }
  .hero-proof .proof-site-after { clip-path:inset(0); }
  .hero-proof .proof-route path { stroke-dashoffset:0; }
  .hero-proof .proof-followup,.hero-proof .followup-message p,.hero-proof .followup-ready,.hero-proof .proof-settled { opacity:1; transform:none; filter:none; }
  .hero-proof .proof-settled { transform:translate(-50%,0); }
  .hero-proof .followup-message>span,.hero-proof .proof-steps b i { transform:scaleX(1); }
}

/* Outcome demos: the lower motion proves the offer rather than decorating it. */
.motion-stage { position:relative; isolation:isolate; min-height:auto; padding:134px 0 146px; overflow:hidden; background:linear-gradient(145deg,#f8faf5 0%,#e9f3e4 54%,#d3e8cf 100%); color:var(--ink); }
.motion-stage:before { content:''; position:absolute; z-index:-2; inset:0; opacity:.58; background-image:linear-gradient(rgba(25,91,64,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(25,91,64,.13) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent); }
.motion-stage:after { content:''; position:absolute; z-index:-1; width:760px; height:760px; right:-260px; top:120px; border-radius:50%; background:radial-gradient(circle at 37% 38%,rgba(250,243,178,.9),rgba(191,237,111,.47) 25%,rgba(111,200,157,.16) 50%,transparent 70%); filter:blur(7px); }
.motion-shell { display:block; }
.motion-intro { max-width:680px; margin:0 auto; text-align:center; }
.motion-intro>p:last-of-type { max-width:535px; margin:0 auto; color:#50675b; }
.motion-intro h2 { margin-bottom:24px; color:#153a2b; font-size:clamp(50px,6.2vw,92px); line-height:.83; }
.motion-intro h2 em { color:#348063; }
.outcome-lab { --scene-x:0px; --scene-y:0px; width:min(1090px,100%); margin:75px auto 0; transition:transform .7s cubic-bezier(.18,.78,.2,1); }
.outcome-meta { display:flex; justify-content:space-between; align-items:center; gap:18px; margin:0 24px 16px; color:#4c6c5b; font:500 8px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.outcome-meta span { display:flex; align-items:center; gap:8px; }.outcome-meta span i,.outcome-booked>i { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(170,222,87,.18),0 0 14px rgba(144,204,77,.72); }
.outcome-meta b { font-weight:500; }.outcome-meta em { margin-left:6px; color:#237154; font-style:normal; }
.outcome-grid { position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(115px,.34fr) minmax(245px,.68fr); align-items:center; min-height:454px; padding:36px; overflow:hidden; border:1px solid rgba(24,76,55,.18); border-radius:36px 9px 36px 9px; background:rgba(247,250,243,.72); box-shadow:inset 0 1px rgba(255,255,255,.95),0 34px 74px rgba(30,79,54,.14); }
.outcome-grid:before { content:''; position:absolute; z-index:0; inset:-32%; background-image:linear-gradient(rgba(25,91,64,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(25,91,64,.11) 1px,transparent 1px); background-size:35px 35px; transform:rotate(-8deg); }
.outcome-grid:after { content:''; position:absolute; z-index:0; width:390px; height:390px; right:-100px; bottom:-175px; border:1px solid rgba(35,111,76,.16); border-radius:50%; box-shadow:0 0 0 55px rgba(80,159,105,.04),0 0 0 117px rgba(80,159,105,.025); }
.outcome-site,.outcome-stream,.outcome-ai { position:relative; z-index:1; }
.outcome-site { height:318px; padding:22px; overflow:hidden; border:1px solid rgba(22,78,57,.22); border-radius:26px 7px 26px 7px; background:linear-gradient(135deg,#f5f8f0 0%,#d7e9d5 68%,#bedbbd 100%); box-shadow:0 23px 42px rgba(30,80,55,.16),inset 0 1px rgba(255,255,255,.95); transform:translate3d(calc(var(--scene-x) * -.28),calc(var(--scene-y) * -.28),0) rotate(-2deg); transition:transform .7s cubic-bezier(.18,.78,.2,1); }
.outcome-window { display:flex; align-items:center; gap:5px; margin:-22px -22px 25px; padding:0 14px; height:31px; border-bottom:1px solid rgba(31,83,61,.13); background:rgba(252,253,249,.77); }.outcome-window span { width:5px; height:5px; border-radius:50%; background:#acb9ae; }.outcome-window b { margin-left:auto; color:#687d70; font:400 6px var(--mono); }
.outcome-site p { position:relative; z-index:2; max-width:260px; margin:0; color:#173c2d; font:500 clamp(37px,3.4vw,54px)/.8 var(--serif); letter-spacing:-.075em; }.outcome-site p em { color:#347d62; font-style:italic; }
.outcome-site small { position:absolute; z-index:2; left:22px; bottom:22px; color:#496858; font:500 7px var(--mono); letter-spacing:.1em; }
.outcome-sun { position:absolute; right:-84px; bottom:-105px; width:295px; height:295px; border-radius:50%; background:radial-gradient(circle at 36% 34%,#faedaa,#d6ed79 26%,#a7d5a1 51%,rgba(122,185,142,.08) 70%); animation:outcome-sun 6.6s ease-in-out infinite; }
.outcome-site-action { position:absolute; z-index:3; left:22px; bottom:53px; display:flex; align-items:center; gap:18px; padding:7px 7px 7px 11px; border:1px solid rgba(20,72,52,.16); border-radius:10px; background:rgba(252,253,249,.7); color:#244f3c; font:600 7px var(--sans); }.outcome-site-action b { display:grid; place-items:center; width:20px; height:20px; border-radius:6px; background:#205a43; color:#d8f29a; font-size:11px; animation:outcome-action 2.8s ease-in-out infinite; }
.outcome-stream { height:318px; min-width:0; }
.outcome-path { position:absolute; left:0; right:-27px; top:53%; height:82px; overflow:hidden; border-top:1px dashed rgba(32,105,71,.38); border-radius:0 0 80px 0; transform:rotate(-11deg); }.outcome-path:after { content:''; position:absolute; right:-1px; top:-4px; width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(173,225,94,.18),0 0 17px rgba(148,207,75,.8); }.outcome-path i { position:absolute; top:-3px; left:0; width:8px; height:8px; border-radius:50%; background:#5cab81; box-shadow:0 0 15px rgba(93,181,130,.82); animation:outcome-route 4.8s cubic-bezier(.3,.72,.22,1) infinite; }
.inquiry { position:absolute; display:grid; grid-template-columns:6px 1fr auto; align-items:center; gap:7px; min-width:143px; padding:9px 10px; border:1px solid rgba(25,84,60,.2); border-radius:11px 4px 11px 4px; background:rgba(252,254,249,.93); box-shadow:0 12px 24px rgba(32,80,56,.14),inset 0 1px rgba(255,255,255,.9); color:#426754; font:500 6px/1 var(--mono); letter-spacing:.08em; opacity:0; }.inquiry i { width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(174,224,96,.17); }.inquiry b { color:#23664a; font-weight:500; }.inquiry-a { left:2%; top:27%; animation:outcome-inquiry-a 4.8s cubic-bezier(.26,.7,.22,1) infinite; }.inquiry-b { left:16%; top:60%; animation:outcome-inquiry-b 4.8s cubic-bezier(.26,.7,.22,1) 2.15s infinite; }
.outcome-ai { height:318px; padding:15px; overflow:hidden; border:1px solid rgba(15,69,48,.32); border-radius:25px 7px 25px 7px; background:linear-gradient(147deg,#1b5a43,#103a2d); box-shadow:0 26px 50px rgba(24,70,47,.24),inset 0 1px rgba(255,255,255,.18); color:#ebf6ed; transform:translate3d(calc(var(--scene-x) * .22),calc(var(--scene-y) * .22),0) rotate(2deg); transition:transform .7s cubic-bezier(.18,.78,.2,1); }
.outcome-ai:after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 28%,transparent 73%,rgba(183,239,154,.08)); }
.outcome-ai-head { position:relative; z-index:1; display:grid; grid-template-columns:22px 1fr auto; gap:7px; padding-bottom:11px; border-bottom:1px solid rgba(232,251,235,.2); color:#e2f5e5; font:500 7px var(--mono); letter-spacing:.09em; }.outcome-ai-head span,.outcome-ai-head i { color:var(--lime); font-style:normal; }
.outcome-contact { position:relative; z-index:1; display:grid; grid-template-columns:36px 1fr auto; gap:9px; align-items:center; padding:15px 0 11px; }.outcome-contact>span { display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:rgba(220,247,221,.12); color:#d8f487; font:500 18px var(--serif); }.outcome-contact p { display:grid; gap:3px; margin:0; }.outcome-contact p b { font-size:9px; }.outcome-contact p small { color:#a6c9b0; font:400 6px var(--mono); }.outcome-contact>i { align-self:start; color:#a7d8b5; font:400 6px var(--mono); font-style:normal; }
.outcome-message { position:relative; z-index:1; min-height:129px; padding:14px; border:1px solid rgba(220,247,221,.15); border-radius:15px 4px 15px 4px; background:rgba(9,42,31,.25); }.outcome-message>i { display:block; height:4px; margin-bottom:6px; border-radius:10px; background:rgba(217,242,219,.19); transform:scaleX(0); transform-origin:left; animation:outcome-line 4.8s ease infinite; }.outcome-message>i:nth-child(2) { width:84%; animation-delay:.12s; }.outcome-message>i:nth-child(3) { width:61%; animation-delay:.24s; }.outcome-message p { margin:15px 0 0; color:#deede1; font:400 8px/1.45 var(--sans); opacity:0; transform:translateY(6px); animation:outcome-copy 4.8s cubic-bezier(.2,.8,.2,1) infinite; }
.outcome-booked { position:relative; z-index:1; display:grid; grid-template-columns:7px 1fr auto; align-items:center; gap:7px; margin-top:10px; color:#b8d7bf; font:400 6px var(--mono); letter-spacing:.06em; opacity:0; transform:translateY(5px); animation:outcome-booked 4.8s cubic-bezier(.2,.8,.2,1) infinite; }.outcome-booked b { color:#d7f284; font-weight:500; }
.outcome-caption { max-width:550px; margin:26px auto 0; color:#4c6959; font-size:14px; line-height:1.45; text-align:center; }
.motion-stage:not(.is-active) .outcome-sun,.motion-stage:not(.is-active) .outcome-site-action b,.motion-stage:not(.is-active) .outcome-path i,.motion-stage:not(.is-active) .inquiry,.motion-stage:not(.is-active) .outcome-message>i,.motion-stage:not(.is-active) .outcome-message p,.motion-stage:not(.is-active) .outcome-booked { animation-play-state:paused; }
@keyframes outcome-sun { 0%,100% { transform:translate(0,0) scale(1); filter:blur(1px); } 50% { transform:translate(-10px,-7px) scale(1.08); filter:blur(5px); } }
@keyframes outcome-action { 0%,100% { transform:translateX(0); } 50% { transform:translateX(3px); } }
@keyframes outcome-route { 0%,14% { left:-8px; opacity:0; scale:.45; } 26% { opacity:1; } 72% { left:calc(100% - 10px); opacity:1; scale:1; } 86%,100% { left:calc(100% - 3px); opacity:0; scale:.5; } }
@keyframes outcome-inquiry-a { 0%,9% { opacity:0; transform:translate(-11px,9px) scale(.86); } 18%,53% { opacity:1; transform:translate(0,0) scale(1); } 69%,100% { opacity:0; transform:translate(72px,43px) scale(.68); } }
@keyframes outcome-inquiry-b { 0%,9% { opacity:0; transform:translate(-11px,9px) scale(.86); } 18%,53% { opacity:1; transform:translate(0,0) scale(1); } 69%,100% { opacity:0; transform:translate(58px,-46px) scale(.68); } }
@keyframes outcome-line { 0%,38% { transform:scaleX(0); } 50%,77% { transform:scaleX(1); } 91%,100% { transform:scaleX(0); transform-origin:right; } }
@keyframes outcome-copy { 0%,47% { opacity:0; transform:translateY(6px); } 58%,78% { opacity:1; transform:none; } 92%,100% { opacity:0; transform:translateY(-4px); } }
@keyframes outcome-booked { 0%,66% { opacity:0; transform:translateY(5px); } 77%,88% { opacity:1; transform:none; } 100% { opacity:0; transform:translateY(-3px); } }
@media (max-width:760px) {
  .motion-stage { padding:92px 0 96px; }.motion-intro { text-align:left; }.motion-intro h2 { font-size:clamp(43px,12vw,60px); }.motion-intro>p:last-of-type { margin:0; }
  .outcome-lab { margin-top:48px; }.outcome-meta { margin-inline:4px; font-size:6px; }.outcome-meta b { text-align:right; }
  .outcome-grid { display:block; min-height:729px; padding:17px; border-radius:27px 7px 27px 7px; }.outcome-site { height:273px; padding:18px; border-radius:20px 5px 20px 5px; transform:none!important; }.outcome-window { height:28px; margin:-18px -18px 22px; }.outcome-site p { max-width:228px; font-size:42px; }.outcome-site small { left:18px; bottom:17px; font-size:6px; }.outcome-site-action { left:18px; bottom:45px; }
  .outcome-stream { position:absolute; z-index:3; inset:245px 8% auto 34%; height:130px; }.outcome-path { top:48%; right:-15px; height:70px; }.inquiry { min-width:126px; font-size:5px; }.inquiry-a { top:0; }.inquiry-b { top:63px; }
  .outcome-ai { position:absolute; z-index:2; left:12%; right:5%; top:320px; height:335px; padding:13px; transform:none!important; border-radius:21px 5px 21px 5px; }.outcome-message { min-height:137px; }.outcome-caption { max-width:300px; margin-top:19px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce) {
  .outcome-sun,.outcome-site-action b,.outcome-path i,.inquiry,.outcome-message>i,.outcome-message p,.outcome-booked { animation:none!important; }
  .inquiry-a { opacity:1; transform:none; }.inquiry-b { display:none; }.outcome-message>i { transform:scaleX(1); }.outcome-message p,.outcome-booked { opacity:1; transform:none; }.outcome-site,.outcome-ai { transform:none!important; }
}

/* First introduction: one editorial reveal, not a portfolio row. */
.work { padding:0 0 168px; }
.case-reveal { margin-top:70px; }
.case-reveal-head { max-width:800px; margin:0 auto 58px; text-align:center; }
.case-reveal-head .case-number { margin-bottom:22px; color:#557063; font:500 9px var(--mono); letter-spacing:.11em; text-transform:uppercase; }
.case-reveal-head h2 { margin:0 auto 23px; color:#15392b; font-size:clamp(54px,7vw,104px); line-height:.79; }
.case-reveal-head h2 em { color:#397d62; }.case-reveal-head>p:last-child { max-width:490px; margin:0 auto; color:#566a5f; font-size:15px; line-height:1.55; }
.case-world { position:relative; min-height:620px; overflow:hidden; border:1px solid rgba(28,75,56,.18); border-radius:39px 10px 39px 10px; background:linear-gradient(136deg,#d8e2d4 0%,#c4d2c1 46%,#edf0e4 100%); box-shadow:inset 0 1px rgba(255,255,255,.83),0 34px 70px rgba(30,71,51,.13); }
.case-world-grid { position:absolute; inset:-25%; opacity:.27; background-image:linear-gradient(rgba(29,80,59,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(29,80,59,.2) 1px,transparent 1px); background-size:44px 44px; transform:rotate(-8deg); }
.case-material { position:absolute; opacity:.92; filter:drop-shadow(0 18px 18px rgba(38,52,42,.09)); }.case-material-a { left:-9%; top:-6%; width:44%; height:119%; background:linear-gradient(117deg,#7b8c7e 0 43%,#adb4a4 44% 72%,#ebe1cb 73%); clip-path:polygon(0 0,100% 0,72% 100%,0 100%); }.case-material-b { right:-9%; top:-15%; width:49%; height:87%; background:linear-gradient(103deg,#d8cfbd 0 48%,#8a8576 49% 51%,#c5bba6 52%); clip-path:polygon(23% 0,100% 0,100% 100%,0 68%); }.case-material-c { z-index:1; left:-7%; right:-8%; bottom:-26%; height:53%; background:repeating-linear-gradient(103deg,#baa993 0 74px,#d8c7aa 75px 148px); transform:skewY(-7deg); }
.case-world-label,.case-world-note { position:absolute; z-index:5; margin:0; color:#2b5442; font:500 8px/1.45 var(--mono); letter-spacing:.12em; text-transform:uppercase; }.case-world-label { left:28px; top:27px; }.case-world-note { right:28px; bottom:26px; text-align:right; }
.case-browser { position:absolute; z-index:4; top:82px; left:50%; width:min(680px,70%); height:421px; overflow:hidden; border:1px solid rgba(37,68,54,.23); border-radius:25px 6px 25px 6px; background:#f6f7ee; box-shadow:0 34px 62px rgba(53,57,44,.25),inset 0 1px rgba(255,255,255,.9); opacity:0; transform:translate(-50%,34px) rotate(-2deg) scale(.97); }
.case-browser-bar { position:relative; z-index:8; display:flex; align-items:center; gap:6px; height:35px; padding:0 13px; border-bottom:1px solid rgba(29,76,59,.12); background:rgba(249,251,247,.9); }.case-browser-bar span { width:6px; height:6px; border-radius:50%; background:#aab5ad; }.case-browser-bar em { margin:auto; color:#718078; font:400 7px var(--mono); }.case-browser-bar b { color:#2c7455; font:500 6px var(--mono); letter-spacing:.1em; }
.case-browser-before,.case-browser-after { position:absolute; inset:35px 0 0; padding:36px; }.case-browser-before { z-index:1; background:linear-gradient(138deg,#e0e3dc,#c7cec4); color:#637168; }.case-browser-before small,.case-browser-after small { display:block; margin-bottom:51px; font:500 7px var(--mono); letter-spacing:.12em; }.case-browser-before strong { display:block; font:500 58px/.82 var(--serif); letter-spacing:-.075em; }.case-browser-before i { display:block; width:35%; height:6px; margin-top:10px; border-radius:8px; background:rgba(76,91,80,.16); }.case-browser-before i:nth-of-type(2) { width:27%; }.case-browser-before i:nth-of-type(3) { width:18%; }
.case-browser-after { z-index:2; overflow:hidden; background:linear-gradient(132deg,#f4f7ef 0%,#dbe9d7 61%,#c0dabc 100%); color:#173a2c; clip-path:inset(0 100% 0 0); }.case-browser-after strong { position:relative; z-index:2; display:block; font:500 clamp(56px,5.4vw,78px)/.76 var(--serif); letter-spacing:-.08em; }.case-browser-after strong em { color:#397d62; }.case-browser-after>span { position:absolute; z-index:1; right:-82px; bottom:-106px; width:334px; height:334px; border-radius:50%; background:radial-gradient(circle at 36% 34%,#f1df98,#bad6aa 48%,#72a88d 70%); }.case-browser-after>div { position:absolute; z-index:3; left:36px; bottom:30px; display:flex; align-items:center; gap:25px; padding:10px 10px 10px 14px; border:1px solid rgba(20,68,51,.18); border-radius:12px; background:rgba(251,253,248,.67); font:600 8px var(--sans); }.case-browser-after>div b { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; background:#205a43; color:#d9f5aa; font-size:13px; }
.case-browser-wipe { position:absolute; z-index:7; inset:35px 0 0; overflow:hidden; background:linear-gradient(90deg,rgba(35,98,71,.94),rgba(89,157,109,.87)); transform:translateX(-102%); }.case-browser-wipe:after { content:''; position:absolute; top:0; right:-3px; width:4px; height:100%; background:var(--lime); box-shadow:0 0 28px rgba(203,243,126,.9); }.case-browser-wipe span { position:absolute; right:18px; top:18px; color:#e6f1e8; font:500 7px var(--mono); letter-spacing:.12em; }
.case-live-chip { position:absolute; z-index:6; left:calc(50% + 220px); top:67px; display:grid; grid-template-columns:7px 1fr auto; align-items:center; gap:8px; min-width:158px; padding:10px 11px; border:1px solid rgba(25,84,60,.2); border-radius:13px 4px 13px 4px; background:rgba(252,254,249,.88); box-shadow:0 13px 25px rgba(32,80,56,.15),inset 0 1px rgba(255,255,255,.9); color:#496c5a; font:500 7px var(--mono); letter-spacing:.08em; opacity:0; transform:translateY(10px); }.case-live-chip i { width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(174,224,96,.18),0 0 13px rgba(142,204,77,.65); }.case-live-chip b { color:#23674b; font-weight:500; }
.case-reveal-foot { display:flex; justify-content:space-between; align-items:center; gap:28px; margin-top:25px; padding:0 5px; }.case-reveal-foot p { margin:0; color:#5b7163; font:500 8px var(--mono); letter-spacing:.1em; text-transform:uppercase; }.case-action { display:inline-flex; align-items:center; gap:18px; color:#173b2e; font-size:11px; font-weight:600; }.case-action span { color:#397d62; font-size:18px; transition:transform .25s; }.case-action:hover span { transform:translate(3px,-3px); }
.case-reveal.is-playing .case-browser { animation:case-browser-arrive .9s cubic-bezier(.18,.8,.2,1) .1s both; }.case-reveal.is-playing .case-browser-wipe { animation:case-wipe 1.25s cubic-bezier(.72,0,.24,1) 1.16s both; }.case-reveal.is-playing .case-browser-after { animation:case-after .76s cubic-bezier(.72,0,.24,1) 1.62s both; }.case-reveal.is-playing .case-live-chip { animation:case-chip .62s cubic-bezier(.18,.8,.2,1) 2.2s both; }
@keyframes case-browser-arrive { from { opacity:0; transform:translate(-50%,34px) rotate(-3deg) scale(.96); filter:blur(8px); } to { opacity:1; transform:translate(-50%,0) rotate(-2deg) scale(1); filter:none; } }
@keyframes case-wipe { 0% { transform:translateX(-102%); } 48% { transform:translateX(0); } 100% { transform:translateX(102%); } }
@keyframes case-after { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0); } }
@keyframes case-chip { from { opacity:0; transform:translateY(10px) scale(.94); } to { opacity:1; transform:none; } }
@media (max-width:760px) {
  .work { padding-bottom:101px; }.case-reveal { margin-top:47px; }.case-reveal-head { margin-bottom:38px; text-align:left; }.case-reveal-head h2 { font-size:clamp(49px,13vw,65px); }.case-reveal-head>p:last-child { margin:0; }
  .case-world { min-height:493px; border-radius:27px 7px 27px 7px; }.case-world-label { top:16px; left:17px; font-size:6px; }.case-world-note { right:16px; bottom:16px; font-size:6px; }.case-material-a { width:58%; }.case-material-b { width:58%; }.case-browser { top:74px; width:84%; height:312px; border-radius:20px 5px 20px 5px; }.case-browser-bar { height:29px; padding-inline:10px; }.case-browser-before,.case-browser-after { inset:29px 0 0; padding:23px; }.case-browser-before small,.case-browser-after small { margin-bottom:31px; font-size:6px; }.case-browser-before strong { font-size:40px; }.case-browser-after strong { font-size:50px; }.case-browser-after>span { right:-94px; bottom:-105px; width:245px; height:245px; }.case-browser-after>div { left:23px; bottom:21px; }.case-browser-wipe { inset:29px 0 0; }.case-live-chip { left:auto; right:7%; top:54px; min-width:126px; padding:8px 9px; font-size:6px; }.case-reveal-foot { display:block; margin-top:19px; }.case-reveal-foot p { margin-bottom:17px; font-size:7px; }
}
@media (prefers-reduced-motion:reduce) {
  .case-reveal .case-browser,.case-reveal .case-browser-wipe,.case-reveal .case-browser-after,.case-reveal .case-live-chip { animation:none!important; }.case-reveal .case-browser { opacity:1; transform:translate(-50%,0) rotate(-2deg); filter:none; }.case-reveal .case-browser-wipe { display:none; }.case-reveal .case-browser-after { clip-path:inset(0); }.case-reveal .case-live-chip { opacity:1; transform:none; }
}

/* Live loops: prove the same story again without a hard visual stop. */
.hero-proof.is-playing .proof-site { animation:proof-site-loop 11.4s cubic-bezier(.18,.8,.2,1) infinite; }
.hero-proof.is-playing .proof-wipe { animation:proof-wipe-loop 11.4s cubic-bezier(.72,0,.24,1) infinite; }
.hero-proof.is-playing .proof-site-after { animation:proof-after-loop 11.4s cubic-bezier(.72,0,.24,1) infinite; }
.hero-proof.is-playing .proof-route path { animation:proof-route-loop 11.4s cubic-bezier(.3,0,.25,1) infinite; }
.hero-proof.is-playing .proof-lead { animation:proof-lead-loop 11.4s cubic-bezier(.28,.72,.22,1) infinite; }
.hero-proof.is-playing .proof-followup { animation:proof-followup-loop 11.4s cubic-bezier(.18,.8,.2,1) infinite; }
.hero-proof.is-playing .followup-message>span { animation:proof-line-loop 11.4s ease infinite; }
.hero-proof.is-playing .followup-message>span:nth-child(2) { animation-delay:.1s; }.hero-proof.is-playing .followup-message>span:nth-child(3) { animation-delay:.2s; }
.hero-proof.is-playing .followup-message p { animation:proof-copy-loop 11.4s cubic-bezier(.2,.8,.2,1) infinite; }
.hero-proof.is-playing .followup-ready { animation:proof-ready-loop 11.4s ease infinite; }
.hero-proof.is-playing .proof-settled { animation:proof-settle-loop 11.4s cubic-bezier(.18,.8,.2,1) infinite; }
.hero-proof.is-playing .proof-steps>span:nth-of-type(1) { animation:proof-step-one-loop 11.4s ease infinite; }.hero-proof.is-playing .proof-steps>span:nth-of-type(2) { animation:proof-step-two-loop 11.4s ease infinite; }.hero-proof.is-playing .proof-steps>span:nth-of-type(3) { animation:proof-step-three-loop 11.4s ease infinite; }
.hero-proof.is-playing .proof-steps>b:nth-of-type(1)>i { animation:proof-progress-one-loop 11.4s ease infinite; }.hero-proof.is-playing .proof-steps>b:nth-of-type(2)>i { animation:proof-progress-two-loop 11.4s ease infinite; }
@keyframes proof-site-loop { 0%,2% { opacity:0; transform:translateY(34px) scale(.96) rotate(-1.5deg); filter:blur(8px); } 9%,88% { opacity:1; transform:none; filter:none; } 96%,100% { opacity:0; transform:translateY(-12px) scale(.985); filter:blur(4px); } }
@keyframes proof-wipe-loop { 0%,10% { transform:translateX(-102%); } 15% { transform:translateX(0); } 20%,100% { transform:translateX(102%); } }
@keyframes proof-after-loop { 0%,15% { clip-path:inset(0 100% 0 0); } 21%,89% { clip-path:inset(0); } 97%,100% { clip-path:inset(0 100% 0 0); } }
@keyframes proof-route-loop { 0%,28% { stroke-dashoffset:410; opacity:0; } 37%,88% { stroke-dashoffset:0; opacity:1; } 97%,100% { stroke-dashoffset:-90; opacity:0; } }
@keyframes proof-lead-loop { 0%,30% { opacity:0; transform:translate(0,10px) scale(.82); } 35% { opacity:1; transform:translate(0,0) scale(1); } 48% { opacity:1; transform:translate(var(--lead-x),var(--lead-y)) scale(.92); } 56%,100% { opacity:0; transform:translate(var(--lead-x),var(--lead-y)) scale(.35); } }
@keyframes proof-followup-loop { 0%,39% { opacity:0; transform:translateY(23px) scale(.96); filter:blur(6px); } 46%,87% { opacity:1; transform:none; filter:none; } 96%,100% { opacity:0; transform:translateY(-10px) scale(.98); filter:blur(4px); } }
@keyframes proof-line-loop { 0%,48% { transform:scaleX(0); transform-origin:left; } 53%,86% { transform:scaleX(1); } 96%,100% { transform:scaleX(0); transform-origin:right; } }
@keyframes proof-copy-loop { 0%,54% { opacity:0; transform:translateY(7px); } 59%,86% { opacity:1; transform:none; } 96%,100% { opacity:0; transform:translateY(-4px); } }
@keyframes proof-ready-loop { 0%,61% { opacity:0; transform:translateY(5px); } 66%,86% { opacity:1; transform:none; } 96%,100% { opacity:0; transform:translateY(-4px); } }
@keyframes proof-settle-loop { 0%,68% { opacity:0; transform:translate(-50%,8px) scale(.96); } 73%,88% { opacity:1; transform:translate(-50%,0) scale(1); } 96%,100% { opacity:0; transform:translate(-50%,-5px) scale(.98); } }
@keyframes proof-step-one-loop { 0%,24% { color:#64766d; } 25%,93% { color:#1f6048; } 100% { color:#64766d; } }
@keyframes proof-step-two-loop { 0%,33% { color:#64766d; } 34%,93% { color:#1f6048; } 100% { color:#64766d; } }
@keyframes proof-step-three-loop { 0%,51% { color:#64766d; } 52%,93% { color:#1f6048; } 100% { color:#64766d; } }
@keyframes proof-progress-one-loop { 0%,14% { transform:scaleX(0); } 25%,94% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
@keyframes proof-progress-two-loop { 0%,31% { transform:scaleX(0); } 42%,94% { transform:scaleX(1); } 100% { transform:scaleX(0); } }

.case-reveal.is-playing .case-browser { animation:case-browser-loop 10.2s cubic-bezier(.18,.8,.2,1) infinite; }
.case-reveal.is-playing .case-browser-wipe { animation:case-wipe-loop 10.2s cubic-bezier(.72,0,.24,1) infinite; }
.case-reveal.is-playing .case-browser-after { animation:case-after-loop 10.2s cubic-bezier(.72,0,.24,1) infinite; }
.case-reveal.is-playing .case-live-chip { animation:case-chip-loop 10.2s cubic-bezier(.18,.8,.2,1) infinite; }
@keyframes case-browser-loop { 0%,2% { opacity:0; transform:translate(-50%,34px) rotate(-3deg) scale(.96); filter:blur(8px); } 10%,86% { opacity:1; transform:translate(-50%,0) rotate(-2deg) scale(1); filter:none; } 96%,100% { opacity:0; transform:translate(-50%,-12px) rotate(-2deg) scale(.985); filter:blur(4px); } }
@keyframes case-wipe-loop { 0%,11% { transform:translateX(-102%); } 16% { transform:translateX(0); } 22%,100% { transform:translateX(102%); } }
@keyframes case-after-loop { 0%,16% { clip-path:inset(0 100% 0 0); } 23%,88% { clip-path:inset(0); } 97%,100% { clip-path:inset(0 100% 0 0); } }
@keyframes case-chip-loop { 0%,24% { opacity:0; transform:translateY(10px) scale(.94); } 30%,87% { opacity:1; transform:none; } 96%,100% { opacity:0; transform:translateY(-5px) scale(.98); } }
@media (prefers-reduced-motion:reduce) {
  .hero-proof.is-playing .proof-site,.hero-proof.is-playing .proof-wipe,.hero-proof.is-playing .proof-site-after,.hero-proof.is-playing .proof-route path,.hero-proof.is-playing .proof-lead,.hero-proof.is-playing .proof-followup,.hero-proof.is-playing .followup-message>span,.hero-proof.is-playing .followup-message p,.hero-proof.is-playing .followup-ready,.hero-proof.is-playing .proof-settled,.hero-proof.is-playing .proof-steps *,.case-reveal.is-playing .case-browser,.case-reveal.is-playing .case-browser-wipe,.case-reveal.is-playing .case-browser-after,.case-reveal.is-playing .case-live-chip { animation:none!important; }
}

/* The premise reads like a composed thought: individual words settle into place. */
.opening-copy { max-width:880px; }
.opening-statement { max-width:805px; margin:0; color:#10271e; font:500 clamp(47px,5.2vw,78px)/.89 var(--serif); letter-spacing:-.073em; }
.opening-support { max-width:610px; margin:34px 0 0; color:#63756c; font:500 clamp(25px,2.45vw,37px)/1.02 var(--serif); letter-spacing:-.06em; }
.opening-copy .word { display:inline-block; overflow:hidden; padding:.05em 0 .12em; margin:-.05em 0 -.12em; vertical-align:top; }
.opening-copy .word>span { display:inline-block; opacity:0; transform:translateY(1.08em) rotate(2deg); filter:blur(7px); }
.opening-copy.is-visible .opening-statement .word>span { animation:premise-word-in .72s cubic-bezier(.16,.82,.22,1) var(--word-delay) both; }
.opening-copy.is-visible .opening-support .word>span { animation:premise-support-in .62s cubic-bezier(.2,.8,.2,1) var(--word-delay) both; }
@keyframes premise-word-in { from { opacity:0; transform:translateY(1.08em) rotate(2deg); filter:blur(7px); } to { opacity:1; transform:none; filter:none; } }
@keyframes premise-support-in { from { opacity:0; transform:translateY(.75em); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } }
@media (max-width:760px) { .opening-statement { font-size:clamp(43px,12.2vw,61px); }.opening-support { max-width:350px; margin-top:27px; font-size:clamp(25px,7.3vw,33px); line-height:1.03; } }
@media (prefers-reduced-motion:reduce) { .opening-copy .word>span { opacity:1; transform:none; filter:none; animation:none!important; } }

/* Credible proof belongs inside the work, not in invented project metrics. */
.case-proof { position:absolute; z-index:6; left:28px; bottom:26px; display:grid; grid-template-columns:auto 1fr; gap:3px 10px; align-items:center; padding:11px 13px; border:1px solid rgba(27,77,56,.2); border-radius:13px 4px 13px 4px; background:rgba(246,249,242,.81); box-shadow:0 11px 24px rgba(41,65,49,.12),inset 0 1px rgba(255,255,255,.9); backdrop-filter:blur(12px); color:#385a4a; }.case-proof b { grid-row:1/3; color:#1f6048; font:500 21px/.85 var(--serif); letter-spacing:-.06em; }.case-proof span { font:500 7px/1.35 var(--mono); letter-spacing:.07em; text-transform:uppercase; }.case-proof small { color:#698073; font:400 5px var(--mono); letter-spacing:.08em; }

/* The process is a scroll story: observe, rebuild, then keep the response moving. */
.method { display:block; padding:148px 0 136px; border-top:1px solid var(--line); }.method-intro { max-width:690px; margin:0 auto 74px; text-align:center; }.method-intro h2 { margin-bottom:23px; font-size:clamp(54px,6.1vw,92px); line-height:.81; }.method-intro>p:last-child { max-width:435px; margin:0 auto; color:#5a6d62; font-size:15px; line-height:1.55; }
.method-notes { position:relative; max-width:1030px; margin:0 auto; border-top:1px solid var(--line); }.method-notes:before { content:''; position:absolute; left:46px; top:31px; bottom:31px; width:1px; background:linear-gradient(#b2d9c2 0%,#87b59b 55%,rgba(135,181,155,.12) 100%); }.method-notes article { position:relative; display:grid; grid-template-columns:92px minmax(0,1fr) 210px; gap:30px; align-items:center; min-height:194px; padding:30px 0; border-bottom:1px solid var(--line); transition:opacity .45s ease,transform .55s cubic-bezier(.18,.8,.2,1); }.method-notes article:not(.is-active) { opacity:.52; }.method-notes article>span { position:relative; z-index:2; display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(33,98,71,.21); border-radius:50%; background:#f4f7f1; color:#35785d; font:500 9px var(--mono); transition:background .4s,color .4s,box-shadow .4s; }.method-notes article.is-active>span { background:#205a43; box-shadow:0 0 0 7px rgba(154,215,140,.16),0 0 22px rgba(41,111,76,.18); color:#dff2ba; }.method-notes h3 { margin-bottom:11px; color:#173a2c; font:500 clamp(30px,3vw,43px)/.92 var(--serif); letter-spacing:-.06em; }.method-notes p { max-width:480px; margin:0; color:#607269; font-size:14px; line-height:1.5; }
.method-visual { position:relative; justify-self:end; width:184px; height:118px; overflow:hidden; border:1px solid rgba(28,85,61,.18); border-radius:18px 5px 18px 5px; background:linear-gradient(142deg,#f7faf3,#dcebd8); box-shadow:inset 0 1px rgba(255,255,255,.84),0 13px 27px rgba(39,84,60,.09); transition:transform .55s cubic-bezier(.18,.8,.2,1),box-shadow .4s; }.method-notes article.is-active .method-visual { transform:translateY(-5px); box-shadow:inset 0 1px rgba(255,255,255,.9),0 19px 36px rgba(39,84,60,.15); }.method-visual b { position:absolute; z-index:2; left:13px; bottom:12px; color:#315d4a; font:500 7px/1.3 var(--mono); letter-spacing:.1em; }.method-visual i { position:absolute; display:block; border-radius:50%; }
.method-visual-a { background:radial-gradient(circle at 64% 42%,#d5ed8d 0 8%,#b7ddaa 9% 26%,#dfeeda 27% 51%,#eef5e9 52%); }.method-visual-a i { border:1px solid rgba(35,105,72,.35); }.method-visual-a i:nth-child(1) { left:59px; top:23px; width:69px; height:69px; }.method-visual-a i:nth-child(2) { left:76px; top:40px; width:35px; height:35px; border-style:dashed; }.method-visual-a i:nth-child(3) { left:89px; top:53px; width:9px; height:9px; background:#285f48; box-shadow:0 0 0 5px rgba(194,237,113,.28); }.method-notes article.is-active .method-visual-a i:nth-child(1) { animation:method-orbit 5s linear infinite; }.method-notes article.is-active .method-visual-a i:nth-child(2) { animation:method-orbit 3.5s linear reverse infinite; }
.method-visual-b { background:linear-gradient(130deg,#eff5e9 0%,#d0e3c9 58%,#bad6ae 100%); }.method-visual-b:after { content:''; position:absolute; z-index:3; inset:0; background:linear-gradient(102deg,transparent 38%,rgba(255,255,255,.65) 48%,transparent 57%); transform:translateX(-125%); }.method-visual-b i { border-radius:8px; background:rgba(38,100,73,.15); }.method-visual-b i:nth-child(1) { left:17px; top:23px; width:78px; height:8px; }.method-visual-b i:nth-child(2) { left:17px; top:37px; width:103px; height:8px; }.method-visual-b i:nth-child(3) { left:17px; top:51px; width:53px; height:8px; }.method-notes article.is-active .method-visual-b:after { animation:method-sweep 2.9s cubic-bezier(.4,0,.2,1) infinite; }
.method-visual-c { background:linear-gradient(145deg,#1c5c43,#103a2d); }.method-visual-c b { color:#d6efbb; }.method-visual-c i { left:20px; right:20px; height:5px; border-radius:9px; background:rgba(220,247,221,.22); transform:scaleX(.2); transform-origin:left; }.method-visual-c i:nth-child(1) { top:26px; }.method-visual-c i:nth-child(2) { top:39px; width:67%; }.method-visual-c i:nth-child(3) { top:52px; width:47%; }.method-notes article.is-active .method-visual-c i { animation:method-compose 3.1s ease infinite; }.method-notes article.is-active .method-visual-c i:nth-child(2) { animation-delay:.12s; }.method-notes article.is-active .method-visual-c i:nth-child(3) { animation-delay:.24s; }
@keyframes method-orbit { to { transform:rotate(360deg); } } @keyframes method-sweep { 0%,52% { transform:translateX(-125%); } 78%,100% { transform:translateX(125%); } } @keyframes method-compose { 0%,25% { transform:scaleX(.2); opacity:.2; } 41%,76% { transform:scaleX(1); opacity:1; } 92%,100% { transform:scaleX(.2); opacity:.2; transform-origin:right; } }

/* The close is a real first step, not a passive mail link. */
.hello { align-items:start; padding:152px 0 146px; }.hello-intake { max-width:415px; padding:22px; border:1px solid rgba(25,77,56,.19); border-radius:23px 7px 23px 7px; background:linear-gradient(145deg,#f9fbf5,#e3efe0); box-shadow:inset 0 1px rgba(255,255,255,.9),0 22px 48px rgba(35,79,57,.12); color:#52675b; font-size:14px; line-height:1.5; }.hello-intake>p { margin:0 0 19px; }.hello-intake fieldset { min-width:0; margin:0; padding:0; border:0; }.hello-intake legend,.intake-note>span { display:block; margin-bottom:9px; color:#365a49; font:500 8px var(--mono); letter-spacing:.1em; text-transform:uppercase; }.intake-choices { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }.intake-choices label { position:relative; display:block; cursor:pointer; }.intake-choices input { position:absolute; opacity:0; pointer-events:none; }.intake-choices span { display:grid; place-items:center; min-height:42px; padding:7px; border:1px solid rgba(28,83,60,.16); border-radius:10px 3px 10px 3px; background:rgba(252,254,249,.65); color:#526a5c; font-size:9px; font-weight:600; line-height:1.1; text-align:center; transition:background .2s,color .2s,border-color .2s,transform .2s; }.intake-choices input:checked + span { border-color:#2d775a; background:#205a43; color:#ecf6eb; box-shadow:0 7px 14px rgba(28,88,64,.18); transform:translateY(-1px); }.intake-note { display:block; margin-top:17px; }.intake-note textarea { display:block; width:100%; min-height:76px; resize:vertical; padding:11px 12px; border:1px solid rgba(28,83,60,.17); border-radius:12px 4px 12px 4px; outline:none; background:rgba(253,254,250,.74); color:#183d2e; font:400 12px/1.45 var(--sans); transition:border-color .2s,box-shadow .2s; }.intake-note textarea::placeholder { color:#87968e; }.intake-note textarea:focus { border-color:#4a9973; box-shadow:0 0 0 4px rgba(114,193,145,.14); }.hello-intake .button { width:100%; margin-top:16px; border:0; cursor:pointer; font-family:inherit; }.hello-intake small { display:block; margin-top:12px; color:#718178; font-size:10px; }.intake-status { min-height:1.25em; margin:8px 0 0; color:#2b7657; font-size:11px; }
@media (max-width:760px) { .case-proof { left:16px; bottom:15px; padding:8px 9px; }.case-proof b { font-size:17px; }.case-proof span { font-size:6px; }.case-proof small { font-size:4px; }.method { padding:94px 0 88px; }.method-intro { margin-bottom:47px; text-align:left; }.method-intro h2 { font-size:clamp(49px,13vw,64px); }.method-intro>p:last-child { margin:0; }.method-notes:before { left:20px; top:25px; bottom:25px; }.method-notes article { grid-template-columns:52px 1fr; gap:11px; min-height:0; padding:25px 0; }.method-notes article>span { width:38px; height:38px; }.method-notes h3 { font-size:31px; }.method-notes p { font-size:13px; }.method-visual { grid-column:2; justify-self:start; width:min(184px,100%); margin-top:9px; }.hello { padding:100px 0 90px; }.hello-intake { margin-top:45px; padding:18px; }.intake-choices span { min-height:45px; font-size:8px; } }
@media (prefers-reduced-motion:reduce) { .method-notes article { opacity:1; }.method-notes article>span { background:#205a43; color:#dff2ba; }.method-visual *,.method-visual:after { animation:none!important; transform:none!important; } }

/* Mobile browsers may render beneath the hardware cutout; only controls take a safe-area inset. */
:root { --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px); }
html { min-height:100%; background:#e8ede9; }
body { min-height:100dvh; }
@media (max-width:760px) {
  body { padding-bottom:var(--safe-bottom); }
  .footer { padding-bottom:max(31px,calc(31px + var(--safe-bottom))); }
}

/* Outcome: a continuous handoff from attention to a real conversation. */
.outcome-section { position:relative; isolation:isolate; overflow:hidden; background:transparent; color:#153a2b; }
.outcome-section:before { content:''; position:absolute; z-index:-2; inset:-18% -12%; opacity:.34; background-image:linear-gradient(rgba(30,100,71,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(30,100,71,.11) 1px,transparent 1px); background-size:48px 48px; mask-image:radial-gradient(ellipse 66% 54% at 50% 50%,#000 20%,rgba(0,0,0,.72) 48%,transparent 78%); }
.outcome-section:after { content:''; position:absolute; z-index:-1; width:min(72vw,940px); aspect-ratio:1; left:50%; top:49%; border-radius:50%; background:radial-gradient(circle,rgba(238,244,174,.58) 0%,rgba(170,220,151,.3) 29%,rgba(86,164,119,.08) 49%,transparent 72%); transform:translate(-50%,-50%); filter:blur(10px); }
.outcome-inner { min-height:690px; padding:58px 0 107px; }
.outcome-section .eyebrow { color:#557263; }
.outcome-section .eyebrow i { background:#66b898; box-shadow:0 0 0 3px rgba(102,184,152,.16); }
.outcome-copy { max-width:990px; margin:102px auto 0; text-align:center; }
.outcome-section .line-copy { max-width:900px; margin:0 auto; color:#153a2b; font:500 clamp(55px,7.4vw,110px)/.8 var(--serif); letter-spacing:-.083em; }
.outcome-section .line-copy em { color:#367a61; }
.outcome-route { display:grid; grid-template-columns:auto minmax(170px,1fr) auto; align-items:center; gap:17px; width:min(680px,100%); margin:52px auto 28px; color:#3d6f59; font:500 8px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.outcome-route p { margin:0; white-space:nowrap; }
.outcome-track { position:relative; height:1px; overflow:visible; background:rgba(31,103,71,.22); }
.outcome-track:before,.outcome-track:after { content:''; position:absolute; top:50%; width:7px; height:7px; border-radius:50%; transform:translateY(-50%); background:#5da77b; }
.outcome-track:before { left:-2px; }.outcome-track:after { right:-2px; background:#d2ed79; box-shadow:0 0 0 5px rgba(201,237,113,.19),0 0 16px rgba(176,218,91,.55); }
.outcome-track i { position:absolute; top:50%; left:-10px; width:9px; height:9px; border-radius:50%; transform:translate(-50%,-50%) scale(.55); background:#dcf38a; box-shadow:0 0 15px rgba(181,225,95,.85); opacity:0; }
.outcome-track i:nth-child(1) { animation:outcome-handoff 4.8s cubic-bezier(.42,0,.3,1) infinite; }
.outcome-track i:nth-child(2) { animation:outcome-handoff 4.8s cubic-bezier(.42,0,.3,1) 1.6s infinite; }
.outcome-track i:nth-child(3) { animation:outcome-handoff 4.8s cubic-bezier(.42,0,.3,1) 3.2s infinite; }
.outcome-explanation { max-width:510px; margin:0 auto; color:#506d5c; font-size:15px; line-height:1.55; }
.outcome-secondary { margin:37px 0 0; color:#547464; font:500 clamp(27px,3vw,42px)/.94 var(--serif); letter-spacing:-.06em; }
.outcome-secondary span { color:#267252; }
.outcome-inner:not(.is-playing) .outcome-copy { opacity:0; transform:translateY(18px); }
.outcome-inner.is-playing .outcome-copy { animation:outcome-settle .82s cubic-bezier(.18,.8,.2,1) both; }
.outcome-inner.is-playing .line-copy { animation:outcome-breathe 7.2s ease-in-out .8s infinite; }
@keyframes outcome-handoff { 0%,13% { left:-2%; opacity:0; transform:translate(-50%,-50%) scale(.45); } 21% { opacity:1; } 69% { left:102%; opacity:1; transform:translate(-50%,-50%) scale(1); } 80%,100% { left:102%; opacity:0; transform:translate(-50%,-50%) scale(.45); } }
@keyframes outcome-settle { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes outcome-breathe { 0%,100% { letter-spacing:-.083em; } 50% { letter-spacing:-.076em; } }
@media (max-width:760px) {
  .outcome-inner { min-height:575px; padding:46px 0 76px; }
  .outcome-copy { margin-top:72px; text-align:left; }
  .outcome-section .line-copy { max-width:344px; margin:0; font-size:clamp(49px,13vw,65px); }
  .outcome-route { grid-template-columns:1fr; gap:12px; width:100%; margin:40px 0 25px; }
  .outcome-route p:last-child { text-align:right; }
  .outcome-track { margin-inline:3px; }
  .outcome-explanation { max-width:342px; margin:0; font-size:14px; }
  .outcome-secondary { margin-top:30px; font-size:clamp(28px,8vw,38px); }
}
@media (prefers-reduced-motion:reduce) {
  .outcome-inner:not(.is-playing) .outcome-copy,.outcome-inner.is-playing .outcome-copy { opacity:1; transform:none; animation:none; }
  .outcome-track i,.outcome-inner.is-playing .line-copy { animation:none!important; }
  .outcome-track i:first-child { left:50%; opacity:1; transform:translate(-50%,-50%); }
  .outcome-track i:not(:first-child) { display:none; }
}

/* The brand mark is drawn in CSS so interface copy remains text-only. */
.brand-mark { font-size:0; }
.brand-mark:before { content:''; width:7px; height:7px; border:1px solid currentColor; transform:rotate(45deg); }

/* Hero title: a single clear arrival, with the service promise carrying the motion. */
.hero-copy.reveal { opacity:1; transform:none; transition:none; }
.hero-title .hero-line { display:block; overflow:hidden; padding:.06em .05em .13em; margin:-.06em -.05em -.13em; }
.hero-title .hero-line>span { display:block; opacity:0; transform:scale(.985); filter:blur(13px); }
.hero-eyebrow,.hero .lede,.hero-action { opacity:0; transform:scale(.99); filter:blur(5px); }
.hero-copy.is-visible .hero-eyebrow { animation:hero-soft-focus .62s cubic-bezier(.2,.8,.2,1) .04s both; }
.hero-copy.is-visible .hero-line:nth-child(1)>span { animation:hero-title-focus .86s cubic-bezier(.18,.82,.2,1) .17s both; }
.hero-copy.is-visible .hero-line:nth-child(2)>span { animation:hero-title-focus .86s cubic-bezier(.18,.82,.2,1) .37s both; }
.hero-copy.is-visible .hero-line:nth-child(3)>span { animation:hero-title-focus .86s cubic-bezier(.18,.82,.2,1) .57s both; }
.hero-copy.is-visible .lede { animation:hero-soft-focus .62s cubic-bezier(.2,.8,.2,1) .91s both; }
.hero-copy.is-visible .hero-action { animation:hero-soft-focus .62s cubic-bezier(.2,.8,.2,1) 1.03s both; }
@keyframes hero-title-focus { 0% { opacity:0; transform:scale(.985); filter:blur(13px); } 72% { opacity:1; transform:scale(1.004); filter:blur(.45px); } 100% { opacity:1; transform:none; filter:none; } }
@keyframes hero-soft-focus { from { opacity:0; transform:scale(.99); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } }
@media (prefers-reduced-motion:reduce) {
  .hero-eyebrow,.hero .lede,.hero-action,.hero-title .hero-line>span { opacity:1; transform:none; filter:none; animation:none!important; }
}