/* Rintrah: rounded plates, paper light, imagery beneath the words. */
#packages{padding:0;background:var(--ground)}
.sys{height:760vh}
.sys-st{border-radius:0;background:var(--night)}
#growth-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:auto}
.sys-l[data-s="0"],.sys-l[data-s="1"],.sys-l[data-s="2"],.sys-l[data-s="3"]{background:transparent;pointer-events:none}
.sys-l[data-s="0"]::after,.sys-l[data-s="1"]::after,.sys-l[data-s="2"]::after{display:none}
.sys-l[data-s="3"]::after{opacity:0;transition:opacity 1s;background:linear-gradient(90deg,rgba(21,18,13,.95),rgba(21,18,13,.75) 37%,transparent 80%)}
.sys-l[data-s="3"].on::after{opacity:1}
.sys-copy{left:clamp(28px,5vw,80px);bottom:clamp(64px,12vh,120px);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.2,1);text-shadow:0 2px 20px #15120d}
.sys-l.past .sys-copy{opacity:0;transform:translateY(-24px)}
.sys-copy h3{max-width:12ch}
.sys-copy p{color:rgba(237,229,212,.82)}
.sys-head{left:clamp(28px,5vw,80px);transition:opacity .5s;pointer-events:none}
.sys-intro .intro-copy{top:clamp(135px,24vh,260px);bottom:auto;width:min(790px,80%);text-shadow:none}
.intro-copy h2{font-family:var(--serif);font-size:clamp(34px,3.5vw,48px);line-height:1.13;letter-spacing:-.03em;max-width:23ch;margin:0 0 30px;color:var(--night-text)}
.intro-copy p{font-size:clamp(17px,1.6vw,21px);max-width:56ch;line-height:1.5;margin:0 0 15px}
.sys-l[data-s="2"] .sys-copy{bottom:clamp(50px,9vh,96px)}
.sys-cit{image-rendering:auto}
.software .wrap{max-width:1440px}
.software .sec-head{max-width:1200px;margin-inline:auto}
.zoa-tools{display:flex;flex-direction:column;gap:26px}
.zoa-tool{position:relative;isolation:isolate;min-height:clamp(580px,78vh,850px);border-radius:24px;overflow:hidden;background:var(--night);color:var(--night-text)}
.tool-art{position:absolute;inset:0;margin:0;border-radius:inherit;overflow:hidden;opacity:.82}
.tool-art canvas[data-tool-art]{image-rendering:pixelated}
.tool-art canvas{width:100%;height:100%;display:block;image-rendering:auto;transform:none!important;transition:none!important}
.zoa-tool::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(21,18,13,.94),rgba(21,18,13,.7) 35%,rgba(21,18,13,.06) 75%),linear-gradient(0deg,rgba(21,18,13,.72),transparent 70%)}
.tool-copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:inherit;padding:clamp(30px,5vw,76px);max-width:660px}
.tool-copy h3{font-family:var(--serif);font-weight:400;font-size:clamp(42px,5.4vw,76px);line-height:1;letter-spacing:-.03em;margin:0 0 24px;color:var(--night-text)}
#incrementality .tool-copy h3{font-size:clamp(36px,4.6vw,64px);text-wrap:balance}
.tool-copy p{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:rgba(237,229,212,.84);margin:0;max-width:42ch}
.tool-copy ul{display:none}
.tool-copy a{display:flex;justify-content:space-between;align-items:center;gap:32px;align-self:flex-start;font-family:var(--mono);font-size:12px;text-decoration:none;border:0;background:rgba(237,229,212,.09);border-radius:10px;padding:12px 16px;margin-top:27px;color:var(--night-text)}
.tool-copy a:hover{background:rgba(237,229,212,.16)}
.tool-copy a:focus-visible{outline:2px solid var(--night-text);outline-offset:6px;border-radius:4px}
/* Services use space and distinct surfaces, never divider rules. */
#pricing{background:var(--night);color:var(--night-text)}
#pricing .sec-head h2,#pricing .service-card h3,#pricing .engagement h3,#pricing .equity-partner h3{color:var(--night-text)}
#pricing .sec-head p,#pricing .service-card p,#pricing .engagement p{color:rgba(237,229,212,.78)}
#pricing .service-card{background:rgba(237,229,212,.055)}
#pricing .equity-partner{background:rgba(237,229,212,.065);border:0}
#pricing ::selection{background:var(--paper);color:var(--night)}
#pricing .work-wrap{max-width:1248px}
#pricing .sec-head{display:block;text-align:left;max-width:760px;margin:0 0 46px;justify-items:start}
#pricing .sec-head p{margin:22px 0 0;max-width:56ch}
.service-index{margin:0 0 68px}
.service-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;border:0}
.service-card{padding:clamp(26px,3vw,40px);border:0;border-radius:22px;background:#FBF8F2;align-content:start}
.service-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(25px,2.4vw,32px);line-height:1.14;letter-spacing:-.02em;margin:0 0 19px;max-width:25ch}
.service-card p{font-size:17px;line-height:1.55;color:var(--ink-2);margin:0;max-width:52ch}
#pricing .engagements{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border:0}
#pricing .engagement{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:12px 0;gap:28px;border:0}
#pricing .engagement h3{font-size:clamp(28px,2.5vw,36px);line-height:1.1;max-width:16ch}
#pricing .engagement p{font-size:17px;line-height:1.5;margin:18px 0 0}
#pricing .engagement a{font-size:11px;line-height:1.5;white-space:normal;border:0;border-radius:10px;background:var(--paper);padding:13px 16px}
#pricing .engagement a:hover{background:#FBF8F2}
.equity-partner{border-radius:24px}
#faq .qa2,#faq .qa-item,footer,.foot-about{border:0!important}
#faq .qa-item{padding-block:30px}
.service-card{transition:opacity .65s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.service-card.motion-pending{opacity:0;transform:translateY(18px)}
@media(max-width:900px){
 #packages{padding:0}.sys-st{border-radius:0}.sys-copy{left:26px;bottom:54px;width:calc(100% - 52px)}.sys-copy h3{font-size:clamp(38px,6vw,56px)}.sys-copy p{font-size:17px;max-width:48ch}.sys-head{left:26px;top:105px}.sys-head h2{font-size:25px}
 .sys-intro .intro-copy{top:clamp(140px,23vh,210px);width:calc(100% - 52px)}.intro-copy h2{font-size:clamp(36px,5vw,48px);max-width:21ch}.intro-copy p{font-size:18px}
 #pricing .engagements{grid-template-columns:1fr;gap:38px}.tool-copy{max-width:590px}
}
@media(max-width:600px){
 .software .wrap{padding-inline:8px}.software .sec-head{padding-inline:16px}.zoa-tools{gap:18px}.zoa-tool{min-height:max(720px,88svh);border-radius:22px}.tool-copy{padding:34px 26px;max-width:none}.tool-copy h3{font-size:46px}.tool-copy p{font-size:17px}.zoa-tool::after{background:linear-gradient(0deg,rgba(21,18,13,.98),rgba(21,18,13,.83) 31%,rgba(21,18,13,.05) 82%)}
 .sys-intro .intro-copy{top:150px}.intro-copy h2{font-size:36px;margin-bottom:24px}.intro-copy p{font-size:17px}.sys-copy h3{font-size:40px}.sys-copy p{font-size:16px;line-height:1.5}.sys-l[data-s="2"] .sys-copy{bottom:40px}.sys-l[data-s="2"] h3{max-width:none;font-size:36px}.sys-head{top:100px}.sys-head h2{font-size:23px}
 .sys-l[data-s="3"]::after{background:linear-gradient(0deg,rgba(21,18,13,.97),rgba(21,18,13,.64) 47%,rgba(21,18,13,.1) 87%)}
 .service-menu{grid-template-columns:1fr;gap:14px}.service-card{padding:28px 24px}.service-index{margin-bottom:46px}#pricing .sec-head{margin-bottom:30px}
}
@media(max-width:700px) and (max-height:740px){.sys-copy h3{font-size:38px}.sys-copy p{font-size:15px}.sys-copy{bottom:42px}.sys-intro .intro-copy{top:135px}.intro-copy h2{font-size:34px;margin-bottom:20px}.intro-copy p{font-size:16px}.sys-l[data-s="2"] .sys-copy{bottom:30px}}
@media(prefers-reduced-motion:reduce){.sys-copy,.sys-head{transition:none!important;transform:none!important}.service-card{transition:none}.service-card.motion-pending{opacity:1;transform:none}}

/* Alternating editorial composition; consistent paragraph measures inside each side. */
#pricing{padding-block:clamp(72px,8vw,120px);overflow:hidden}
#pricing .work-wrap{max-width:1440px;padding-inline:clamp(16px,4vw,40px)}
#pricing .sec-head{display:grid;justify-items:center!important;text-align:center!important;max-width:760px;margin:0 auto clamp(72px,8vw,120px)!important;gap:22px!important}
#pricing .sec-head p{margin:0;max-width:48ch;font-size:clamp(18px,1.7vw,22px);line-height:1.45;text-wrap:pretty}
#pricing .service-menu{display:flex;flex-direction:column;gap:clamp(85px,11vw,165px)}
#pricing .service-card{padding:0;border:0;background:none;opacity:1;transform:none;transition:none;border-radius:0}
#pricing .service-copy{display:block;width:100%;max-width:none}
#pricing .service-card h3{font-family:var(--serif);font-size:clamp(48px,7.2vw,108px);line-height:1.06;letter-spacing:-.04em;max-width:none;margin:0 0 32px;text-align:left;text-wrap:balance}
#pricing .service-detail{padding-top:0;min-width:0;width:min(52ch,64%);margin-left:8%;font-size:clamp(18px,1.55vw,21px)}
#pricing .service-card:nth-child(even) h3{text-align:right}
#pricing .service-card:nth-child(even) .service-detail{margin-left:auto;margin-right:8%}
#pricing .service-card p{font-size:clamp(18px,1.55vw,21px);line-height:1.55;max-width:none;margin:0;color:rgba(237,229,212,.82);text-align:justify;hyphens:none;text-wrap:pretty}
#pricing .service-offerings{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;color:var(--night-text);font-size:clamp(18px,1.65vw,23px);line-height:1.3;font-weight:500}
#pricing .service-link{display:inline-flex;align-items:center;gap:18px;margin-top:24px;padding-block:8px;color:var(--night-text);font-family:var(--mono);font-size:12px;line-height:1.5;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(237,229,212,.35)}
#pricing .service-link:hover{text-decoration-color:currentColor}
.service-line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.service-line>span{display:block}
#pricing .service-index{margin-bottom:clamp(80px,9vw,128px)}
/* Fine coloured particles gather on the right of the partnership surface. */
#pricing .engagement-panel{position:relative;isolation:isolate;overflow:hidden;max-width:none;margin-inline:0;padding:clamp(28px,5vw,64px);border-radius:24px;background:#FBF8F2;color:var(--ink)}
#pricing .engagement-panel::before{display:none}
#pricing .partnership-dust{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
#pricing .engagement-panel .equity-partner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;margin:0;padding:0;background:none;border:0;border-radius:0;gap:32px}
#pricing .equity-partner h3{font-size:clamp(32px,3.6vw,52px);line-height:1.08;max-width:23ch;color:var(--ink);margin:0 0 22px;text-wrap:pretty}
#pricing .equity-partner p{color:var(--ink-2);font-size:18px;line-height:1.5;max-width:54ch;margin:0}
#pricing .equity-partner .btn{background:var(--ink);color:var(--paper);border:0;border-radius:8px;white-space:normal;text-align:center;font-size:12px}
#pricing .equity-partner .btn:hover{background:#30291F}
#pricing .equity-partner .btn:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.btn,.tool-copy>a{font-weight:500;letter-spacing:.005em}
#forge .tool-art{opacity:1}
#forge .tool-art canvas{image-rendering:auto}
#forge::after{background:linear-gradient(90deg,rgba(21,18,13,.96),rgba(21,18,13,.72) 34%,rgba(21,18,13,.03) 72%),linear-gradient(0deg,rgba(21,18,13,.48),transparent 65%)}
@media(max-width:1000px){
 #pricing .engagement-panel .equity-partner{grid-template-columns:1fr}
 #pricing .equity-partner .btn{justify-self:start}
 #pricing .service-offerings{gap:20px 24px}
}
@media(max-width:700px){
 #pricing .work-wrap{padding-inline:24px}
 #pricing .sec-head h2{font-size:38px!important;line-height:1.08!important}
 #pricing .sec-head{margin-bottom:64px!important}
 #pricing .service-menu{gap:60px}
 #pricing .service-copy{display:block}
 #pricing .service-card h3,#pricing .service-card:nth-child(even) h3{font-size:clamp(34px,9vw,52px);letter-spacing:-.03em;text-align:left;margin-bottom:24px}
 #pricing .service-card p{font-size:17px;text-align:left;hyphens:none}
 #pricing .service-offerings{font-size:19px;margin-top:22px}
 #pricing .service-detail,#pricing .service-card:nth-child(even) .service-detail{padding:0;width:100%;margin:0}
 #pricing .engagement-panel{padding:30px 24px;margin-inline:-8px;border-radius:22px}
 #pricing .equity-partner h3{font-size:32px}
 #pricing .equity-partner p{font-size:17px}
 #forge::after{background:linear-gradient(0deg,rgba(21,18,13,.98),rgba(21,18,13,.83) 31%,rgba(21,18,13,.04) 82%)}
}
@media(prefers-reduced-motion:reduce){
 .service-line>span,#pricing .service-card p{transition:none!important;transform:none!important;opacity:1!important}
}

/* Longer authored intro reads in normal page flow over the pinned dust field. */
.sys.sys-reading{height:var(--intro-scroll-height,760svh);background:var(--night)}
.sys-reading>.sys-intro{position:absolute;inset:0 0 auto;z-index:2;padding:clamp(108px,14svh,136px) clamp(26px,5vw,80px) 42px;clip-path:none}
.sys-reading>.sys-intro .intro-copy{position:relative;inset:auto;width:min(100%,900px);opacity:1;transform:none;transition:none}
.sys-reading .intro-copy h2{max-width:none;margin:0 0 24px}
.sys-reading .intro-copy p{font-size:clamp(17px,1.55vw,20px);line-height:1.46;max-width:none;margin:0;color:#EDE5D4;text-shadow:0 1px 9px #15120D,0 0 24px #15120D;text-wrap:pretty}
.sys-reading .intro-copy p+p{margin-top:.8em}
.sys-reading .intro-copy a{pointer-events:auto;color:inherit;text-decoration:underline;text-decoration-color:rgba(237,229,212,.45);text-underline-offset:.18em;text-decoration-thickness:1px}
.sys-reading .intro-copy a:hover{color:#fff;text-decoration-color:currentColor}
.hero-copy>p{font-size:clamp(18px,1.8vw,22px);line-height:1.45;max-width:640px;text-wrap:balance}
@media(max-width:700px){.sys-reading>.sys-intro{padding-top:108px;padding-bottom:36px}.sys-reading .intro-copy h2{margin-bottom:22px}.sys-reading .intro-copy p{font-size:17px;line-height:1.48}}

/* Stable canvas geometry while mobile browser controls expand and collapse. */
.sys-reading .sys-st{height:100svh}

/* Keep the argument on the left, with a quiet step up for the studio statement. */
.sys-reading .intro-copy p:last-child{color:#FBF8F2;font-size:clamp(18px,1.65vw,21px);line-height:1.46;margin-top:1em}
@media(max-width:700px){.sys-reading .intro-copy p:last-child{font-size:18px}}

/* Quiet the entire intro field uniformly, then restore it as the funnel arrives. */
.sys-reading #growth-particles{opacity:var(--dust-visibility,.28)}

/* Four project options retain a deliberate two-by-two rhythm. */
#pricing .service-offerings{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:24px 28px}
#pricing .service-offerings li{min-width:0;text-wrap:balance}
#software .sec-head p{max-width:62ch}
#forge .tool-art{inset:-1%;transform:none;animation:none}
@media(max-width:700px){#pricing .service-offerings{font-size:17px;gap:20px 16px}}
@media(prefers-reduced-motion:reduce){#forge .tool-art,#forge .tool-art::after{animation:none!important}}