@import url("styles-motion-11.css?v=motion-15");

:root { --wp: #5b7fbf; --shop: #6fa383; --custom: #9b6cff; }
.hero h1 { max-width: 1100px; margin-inline:auto; font-size: clamp(54px, 7.1vw, 104px); line-height: .91; }
.hero h1 span,.hero h1 b { display:block; }
.hero h1 span { color: var(--ink); }
.hero h1 b { color: var(--violet-bright); }
.hero-summary { max-width: 610px; }
.hero { min-height: 100svh; display:grid; place-items:center; }
.hero-copy { padding-top:0; }
.phase-console,.platform-rail,.hero-coordinate { display:none!important; }
.about-copy { grid-template-columns:minmax(0,1.18fr) minmax(420px,.82fr); }
.about { position:relative; isolation:isolate; overflow:hidden; background:#080809; }
.about-cursor-grid { position:absolute; z-index:1; inset:0; display:block; width:100%; height:100%; opacity:1; pointer-events:none; }
.about-copy { position:relative; z-index:2; }
.about-copy h2 { font-size:clamp(48px,4.7vw,72px); }
.about-copy h2>span { white-space:nowrap; }
.engines { padding: 150px max(24px, calc((100vw - 1240px) / 2)); background: #080809; }
.engines-intro { display: grid; grid-template-columns: 1.4fr .6fr; align-items: end; gap: 48px; margin-bottom: 76px; }
.engines-intro h2 { margin: 0; color: #f5f5f5; font-size: clamp(54px, 6vw, 88px); font-weight: 500; line-height: .9; letter-spacing: -.04em; }
.engines-intro p { max-width: 28ch; margin: 0; color: #8e8a94; font-size: 18px; line-height: 1.5; }
.engine-cards { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #27252a; }
.engine-card { --engine: var(--custom); position: relative; min-height: 520px; padding: 34px 30px 28px; border-left: 1px solid color-mix(in srgb, var(--engine) 72%, #333); transition: border-color 150ms ease, background-color 150ms ease; }
.engine-wordpress { --engine: var(--wp); }.engine-shopify { --engine: var(--shop); }.engine-custom { --engine: var(--custom); }
.engine-card:hover { border-left-color: color-mix(in srgb, var(--engine) 94%, white); background: rgba(255,255,255,.018); }
.engine-card > p:first-child { margin: 0 0 70px; color: var(--engine); font: 10px/1.4 "Azeret Mono", monospace; letter-spacing: .08em; text-transform: uppercase; transition: color 150ms ease; }
.engine-card > p:first-child span { display: inline-block; min-width: 40px; }
.engine-card h3 { max-width: 12ch; margin: 0 0 24px; color: #fff; font-size: clamp(29px, 2.4vw, 39px); font-weight: 500; line-height: 1.02; letter-spacing: -.035em; }
.engine-card > p:nth-of-type(2) { max-width: 35ch; margin: 0; color: #9b97a1; font-size: 16px; line-height: 1.55; }
.engine-visual { position: absolute; right: 30px; bottom: 28px; left: 30px; height: 96px; border-top: 1px solid #29272c; }
.wp-blocks,.shop-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding-top:16px; }
.wp-blocks i { background: color-mix(in srgb,var(--wp) 25%,#111); }.wp-blocks i:nth-child(2){grid-column:span 2}
.shop-grid i { border:1px solid color-mix(in srgb,var(--shop) 38%,#222); }.shop-grid i::after{content:"";display:block;width:45%;height:2px;margin:54px 8px 0;background:var(--shop)}
.code-lines { display:flex;flex-direction:column;gap:10px;padding-top:16px;color:#9b6cff;font:11px/1.5 "Azeret Mono",monospace; }
.process { padding:150px max(24px,calc((100vw - 1240px)/2)); }
.process-compact { display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw; }
.process-statement { align-self:start;position:sticky;top:120px; }
.process-statement h2 { margin:0;color:#fff;font-size:clamp(50px,5.5vw,80px);font-weight:500;line-height:.92;letter-spacing:-.045em; }
.process-statement h2 em{color:var(--violet);font-style:normal}.process-rule{display:block;width:100%;height:1px;margin-top:38px;background:var(--violet);transform-origin:left}
.process-steps{margin:0;padding:0;list-style:none}.process-steps li{display:grid;grid-template-columns:48px 1fr;gap:20px;padding:28px 0 34px;border-top:1px solid #29272d}.process-steps li>span{color:#6f6b75;font:10px/1.5 "Azeret Mono",monospace}.process-steps h3{margin:0 0 10px;color:#fff;font-size:clamp(23px,2vw,31px);font-weight:500;letter-spacing:-.025em}.process-steps p{max-width:48ch;margin:0;color:#9b97a1;font-size:16px;line-height:1.55}
.process.is-wheel-ready { min-height:100svh; overflow:hidden; }
.process.is-wheel-ready { padding-top:105px; padding-bottom:105px; }
.process.is-wheel-ready .process-compact { min-height:calc(100svh - 210px); grid-template-columns:minmax(520px,.95fr) minmax(0,1.05fr); gap:7vw; align-items:center; }
.process.is-wheel-ready .process-statement { position:relative; top:auto; align-self:center; }
.process.is-wheel-ready .process-statement h2 { font-size:clamp(48px,5vw,72px); }
.process.is-wheel-ready .process-statement h2>span { white-space:nowrap; }
.process.is-wheel-ready .process-steps { position:relative; height:480px; overflow:hidden; perspective:900px; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%); }
.process.is-wheel-ready .process-steps::before { display:none; }
.process.is-wheel-ready .process-steps li { position:absolute; z-index:1; top:50%; right:0; left:0; min-height:128px; padding:20px 0; border:0; transform-origin:center; will-change:transform,opacity; backface-visibility:hidden; }
.process.is-wheel-ready .process-steps li::before,.process.is-wheel-ready .process-steps li::after { content:""; position:absolute; right:0; left:0; height:1px; opacity:0; background:linear-gradient(90deg,var(--violet),rgba(155,108,255,.08)); transition:opacity .24s ease; }
.process.is-wheel-ready .process-steps li::before { top:0; }.process.is-wheel-ready .process-steps li::after { bottom:0; }
.process.is-wheel-ready .process-steps li.is-active::before,.process.is-wheel-ready .process-steps li.is-active::after { opacity:1; }
.process.is-wheel-ready .process-steps li>span { padding-top:8px; transition:color .2s ease; }
.process.is-wheel-ready .process-steps li.is-active>span { color:var(--violet-bright); }
.process.is-wheel-ready .process-steps h3 { font-size:clamp(28px,2.5vw,38px); }
.process.is-wheel-ready .process-steps p { color:#aaa6b0; }
.project-slide{--engine:var(--wp);--engine-stroke:1;position:relative}.project-slide.engine-shop{--engine:var(--shop)}.project-slide.engine-code{--engine:var(--custom)}
.work-track { will-change:transform; backface-visibility:hidden; transform:translateZ(0); }
.project-slide,.project-media { backface-visibility:hidden; }
.project-media { contain:paint; }
.site-nav { background:#171717; backdrop-filter:none; -webkit-backdrop-filter:none; }
.preview-status { background:#101011; backdrop-filter:none; -webkit-backdrop-filter:none; }
.live-preview:not(.is-near) iframe { visibility:hidden; }
.range:not(.is-inview) .range-atmosphere * { animation-play-state:paused!important; }
.project-media[data-preview-label]::before { content:attr(data-preview-label); position:absolute; z-index:1; inset:0; display:flex; align-items:flex-end; padding:clamp(24px,5vw,72px); color:#f5f5f5; background:radial-gradient(circle at 76% 24%,rgba(155,108,255,.2),transparent 28%),linear-gradient(145deg,#15111c,#070708 62%); font-size:clamp(42px,7vw,92px); font-weight:500; line-height:.86; letter-spacing:-.05em; transition:opacity .35s ease; }
.project-media[data-preview-label]::after { content:"Website preview"; position:absolute; z-index:1; top:clamp(24px,4vw,56px); left:clamp(24px,5vw,72px); color:var(--violet-bright); font:8px/1 "Azeret Mono",monospace; letter-spacing:.08em; text-transform:uppercase; transition:opacity .35s ease; }
.project-media.is-loaded[data-preview-label]::before,.project-media.is-loaded[data-preview-label]::after{opacity:0}
.project-slide::before{content:"";position:absolute;z-index:5;inset:0 auto 0 0;width:4px;background:var(--engine);transform:scaleY(var(--engine-stroke));transform-origin:top}.project-slide.engine-hybrid::before{background:linear-gradient(to bottom,var(--wp) 0 50%,var(--custom) 50%)}.project-copy>p,.project-copy>div i:first-child{color:var(--engine)}
.proof-ratio{padding:130px max(24px,calc((100vw - 1240px)/2));background:#080809}.ratio-bar{display:flex;height:8px;margin-bottom:56px;gap:3px;overflow:hidden}.ratio-bar i{display:block;transform-origin:left}.ratio-wp{flex:4;background:var(--wp)}.ratio-custom{flex:2;background:var(--custom)}.ratio-hybrid{flex:1;background:linear-gradient(90deg,var(--wp) 50%,var(--custom) 50%)}.ratio-shop{flex:1;background:var(--shop)}.ratio-copy{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:end}.ratio-copy h2{margin:0;color:#fff;font-size:clamp(42px,5vw,74px);font-weight:500;line-height:.95;letter-spacing:-.04em}.ratio-copy p{max-width:34ch;margin:0;color:#9b97a1;font-size:17px;line-height:1.55}
@media(max-width:760px){html,body{overflow-x:hidden}.site-nav{right:12px;left:12px;width:auto;grid-template-columns:minmax(0,1fr) auto;transform:none!important}.site-nav nav{display:flex;justify-self:end;gap:10px;padding-right:5px}.site-nav nav a{font-size:13px}.site-nav .brand-name{display:block;font-size:13px;white-space:nowrap}.site-nav .brand{gap:8px}.nav-role{display:none}.hero-copy{right:12px;left:12px;width:auto}.hero h1{max-width:100%;font-size:clamp(35px,10.8vw,43px);line-height:.95}.hero h1 br{display:block}.hero-summary{max-width:35ch;font-size:15px;line-height:1.45}.engines{padding:96px 20px}.engines-intro,.process-compact,.ratio-copy{grid-template-columns:1fr;gap:26px}.engine-cards{grid-template-columns:1fr}.engine-card{min-height:410px;padding-inline:20px}.engine-card>p:first-child{margin-bottom:48px}.engine-visual{right:20px;left:20px}.process{padding:100px 20px}.process-statement{position:static}.proof-ratio{padding:96px 20px}.ratio-bar{height:7px;margin-bottom:40px}.project-media[data-preview-label]::before{padding:24px;font-size:46px}.project-media[data-preview-label]::after{top:24px;left:24px}}
@media(max-width:340px){.site-nav nav{gap:7px;padding-right:2px}.site-nav nav a{font-size:10px}.site-nav .brand-name{font-size:11px}.hero h1{font-size:35px}.hero-summary{font-size:14px}}

/* Shared case-study menu */
.cases-menu{position:relative;align-self:stretch;display:flex;align-items:center}
.cases-trigger{position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 0;border:0;background:none;color:#d7d5da;font:500 15px/1 "Outfit",Arial,sans-serif;cursor:pointer;transition:color 150ms cubic-bezier(.4,0,.2,1)}
.cases-trigger>span{color:var(--violet-bright);font-size:12px;transition:transform 220ms cubic-bezier(.22,1,.36,1)}
.cases-trigger::after{content:"";position:absolute;right:0;bottom:6px;left:0;height:1px;transform:scaleX(0);transform-origin:left;background:var(--violet);transition:transform 150ms cubic-bezier(.4,0,.2,1)}
.cases-trigger:hover,.cases-trigger:focus-visible,.cases-trigger.is-current{color:#fff}
.cases-trigger:hover::after,.cases-trigger:focus-visible::after,.cases-trigger.is-current::after,.cases-menu.is-open .cases-trigger::after{transform:scaleX(1)}
.cases-dropdown{position:absolute;z-index:80;top:calc(100% + 8px);left:50%;width:440px;padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:2px;transform:translate(-50%,10px);border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(14,14,16,.985);box-shadow:0 28px 80px rgba(0,0,0,.58);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 180ms ease,transform 260ms cubic-bezier(.22,1,.36,1),visibility 180ms}
.cases-dropdown::before{content:"";position:absolute;right:0;bottom:100%;left:0;height:12px}
.site-nav nav .cases-dropdown a{min-width:0;padding:12px 13px;border-radius:8px;color:#aaa6b0;font-size:13px;line-height:1.15;white-space:nowrap;transition:color 150ms ease,background 150ms ease}
.site-nav nav .cases-dropdown a::after{display:none}
.site-nav nav .cases-dropdown a:hover,.site-nav nav .cases-dropdown a:focus-visible,.site-nav nav .cases-dropdown a[aria-current="page"]{color:#fff;background:rgba(155,108,255,.13)}
.site-nav nav .cases-dropdown .cases-all{grid-column:1/-1;margin-bottom:4px;padding:13px;border-bottom:1px solid rgba(255,255,255,.08);border-radius:8px 8px 2px 2px;color:#fff;display:flex;justify-content:space-between}
.cases-menu:focus-within:not(.is-dismissed) .cases-dropdown,.cases-menu.is-open .cases-dropdown{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto}
.cases-menu:focus-within:not(.is-dismissed) .cases-trigger>span,.cases-menu.is-open .cases-trigger>span{transform:rotate(180deg)}
@media(hover:hover){.cases-menu:hover .cases-dropdown{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto}.cases-menu:hover .cases-trigger>span{transform:rotate(180deg)}}
@media(max-width:760px){.cases-trigger{font-size:13px}.cases-dropdown{position:fixed;top:72px;right:12px;left:12px;width:auto;transform:translateY(10px)}.cases-menu:focus-within:not(.is-dismissed) .cases-dropdown,.cases-menu.is-open .cases-dropdown{transform:translateY(0)}.site-nav nav .cases-dropdown a{font-size:12px}}
@media(max-width:760px) and (hover:hover){.cases-menu:hover .cases-dropdown{transform:translateY(0)}}
.cases-menu.is-dismissed .cases-dropdown{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:340px){.cases-trigger{gap:3px;font-size:10px}.cases-trigger>span{font-size:9px}.cases-dropdown{top:68px;padding:7px}.site-nav nav .cases-dropdown a{padding:10px 9px;font-size:10px}}
/* Pinned engine deck */
.engines { padding:0; min-height:100svh; overflow:hidden; background:#070708; }
.engine-pin { min-height:100svh; padding:78px 20px 30px; display:flex; flex-direction:column; justify-content:center; perspective:1000px; }
.engines-intro { width:100%; max-width:1024px; margin:0 auto; display:block; text-align:center; }
.engines-intro h2 { font-size:clamp(48px,5vw,76px); line-height:.92; }
.engines-intro p { max-width:none; margin:18px auto 0; font-size:16px; }
.engine-deck { width:100%; max-width:1024px; height:640px; margin:-48px auto 0; padding:24px; display:grid; grid-template-rows:46px minmax(0,1fr); overflow:hidden; border:4px solid #6c6c6c; border-radius:30px; background:#222; box-shadow:0 0 #0000004d,0 9px 20px #0000004a,0 37px 37px #00000042,0 84px 50px #00000026,0 149px 60px #0000000a,0 233px 65px #00000003; transform-origin:center center; }
.engine-deck-bar { height:46px; padding:0 18px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border:1px solid #302e34; border-bottom:0; border-radius:16px 16px 0 0; background:#101012; color:#827d89; font:9px/1 "Azeret Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.engine-deck-bar strong { justify-self:end; color:#aaa6b0; font-weight:400; }.engine-deck-bar strong b{color:#f5f5f5;font-weight:400}
.engine-deck-progress { display:flex; gap:7px; }.engine-deck-progress i{width:32px;height:2px;background:#3a3740}.engine-deck-progress i.is-active{background:var(--engine-active,var(--wp))}
.engine-deck-screen { position:relative; height:auto; min-height:0; overflow:hidden; border:1px solid #302e34; border-radius:0 0 16px 16px; background:#09090b; }
.engine-panel { --engine:var(--custom); position:absolute; inset:0; display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); background:#0b0b0d; visibility:hidden; opacity:0; will-change:transform,opacity; backface-visibility:hidden; }
.engine-panel.is-active { visibility:visible; opacity:1; }.engine-wordpress{--engine:var(--wp)}.engine-shopify{--engine:var(--shop)}.engine-custom{--engine:var(--custom)}
.engine-panel-copy { position:relative; z-index:2; padding:clamp(28px,4vw,58px); display:flex; flex-direction:column; border-right:1px solid color-mix(in srgb,var(--engine) 42%,#29272d); }
.engine-panel-copy>p { margin:0 0 auto; color:var(--engine); font:10px/1.4 "Azeret Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.engine-panel-copy h3 { max-width:11ch; margin:0 0 20px; color:#f5f5f5; font-size:clamp(34px,3.4vw,54px); font-weight:500; line-height:.96; letter-spacing:-.04em; }
.engine-panel-copy>span { max-width:37ch; color:#aaa6b0; font-size:16px; line-height:1.5; }
.engine-panel-copy>a { width:max-content; margin-top:34px; color:#f5f5f5; font:10px/1 "Azeret Mono",monospace; text-transform:uppercase; text-decoration:none; border-bottom:1px solid var(--engine); padding-bottom:8px; }
.engine-site-preview { position:relative; min-width:0; overflow:hidden; background:#080809; }
.engine-site-preview iframe { position:absolute; top:0; left:0; border:0; opacity:0; transform:scale(var(--preview-scale)); transform-origin:top left; transition:opacity .35s ease; pointer-events:none; }
.engine-site-preview>.preview-fallback { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .35s ease; }
.engine-custom-fallback { padding:56px; display:flex; flex-direction:column; justify-content:flex-end; background:radial-gradient(circle at 68% 30%,rgba(155,108,255,.22),transparent 38%),#08080a; }
.engine-custom-fallback span{color:var(--custom);font:9px "Azeret Mono",monospace;text-transform:uppercase}.engine-custom-fallback strong{margin-top:18px;color:#fff;font-size:clamp(54px,6vw,92px);font-weight:500;line-height:.85;letter-spacing:-.05em}
.engine-site-preview.is-loaded iframe{opacity:1}.engine-site-preview.is-loaded>.preview-fallback{opacity:0}
@media(max-width:760px){.engines{min-height:0;overflow:visible}.engine-pin{min-height:0;padding:96px 16px;display:block}.engines-intro{margin-bottom:64px}.engine-deck{display:block;height:auto;margin:0;padding:8px;transform:none!important;overflow:visible;border-width:4px;border-radius:30px;background:#222}.engine-deck-bar{display:none}.engine-deck-screen{display:block;height:auto;min-height:0;overflow:visible;border:0;border-radius:22px}.engine-panel{position:relative;inset:auto;grid-template-columns:1fr;min-height:0;margin-bottom:10px;visibility:visible;opacity:1;transform:none;border:1px solid #302e34;border-radius:18px;overflow:hidden}.engine-panel:last-child{margin-bottom:0}.engine-panel-copy{min-height:340px;padding:32px 28px;border-right:0;border-bottom:1px solid color-mix(in srgb,var(--engine) 42%,#29272d)}.engine-site-preview{min-height:280px}.engine-panel-copy>p{margin-bottom:48px}.engine-panel-copy h3{font-size:34px}.engine-panel-copy>a{margin-top:28px}}
@media(max-width:760px){.hero h1{font-size:clamp(35px,10.8vw,43px);line-height:.95}.about-copy{grid-template-columns:1fr}.about-copy h2>span{white-space:normal}}
@media(max-width:760px){.process.is-wheel-ready{overflow:visible;padding-top:100px;padding-bottom:100px}.process.is-wheel-ready .process-compact{min-height:0;grid-template-columns:1fr}.process.is-wheel-ready .process-statement h2>span{white-space:normal}.process.is-wheel-ready .process-steps{height:auto;overflow:visible;perspective:none;mask-image:none;-webkit-mask-image:none}.process.is-wheel-ready .process-steps::before{display:none}.process.is-wheel-ready .process-steps li{position:relative;top:auto;min-height:0;padding:28px 0 34px;border-top:1px solid #29272d;transform:none!important;filter:none!important;opacity:1!important}}
@media(prefers-reduced-motion:reduce){.project-slide::before,.ratio-bar i,.process-rule{transform:none!important}.engine-card{transition:none}}

/* Mobile keeps the visual rhythm, but uses compositor-only, one-shot reveals. */
@media(max-width:760px){
  .about-cursor-grid[hidden],.live-preview.is-mobile-static iframe{display:none!important}
  .live-preview.is-mobile-static .preview-fallback{opacity:1!important}
  .mobile-motion-ready .mobile-reveal{opacity:0!important;transform:translate3d(0,26px,0)!important;transition:opacity 620ms cubic-bezier(.22,1,.36,1) var(--mobile-delay,0ms),transform 720ms cubic-bezier(.22,1,.36,1) var(--mobile-delay,0ms)!important;will-change:transform,opacity}
  .mobile-motion-ready .mobile-reveal.is-visible{opacity:1!important;transform:translate3d(0,0,0)!important}
  .mobile-motion-ready .process-steps li.mobile-reveal{transform:translate3d(-22px,22px,0)!important}
  .mobile-motion-ready .process-steps li.mobile-reveal.is-visible{transform:translate3d(0,0,0)!important}
  .mobile-motion-ready .ratio-bar.mobile-reveal{transform:scaleX(.08)!important;transform-origin:left}
  .mobile-motion-ready .ratio-bar.mobile-reveal.is-visible{transform:scaleX(1)!important}
  .hero-flow{contain:strict}
  .project-slide,.engine-panel,.range-stage{contain:layout paint style}
}

/* Inline link highlight — hero + about */
.inline-link {
  color: var(--violet-bright);
  text-decoration: underline;
  text-decoration-color: rgba(155, 108, 255, .38);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.inline-link:hover {
  color: #fff;
  text-decoration-color: var(--violet-bright);
}