/* The second half: an unfolding portfolio, a stack of working papers, an open invitation. */
.services-stage,.process-stage{position:relative;min-width:0}
.process{display:block}.process-stage{display:grid;grid-template-columns:1fr 1.1fr;gap:12%}
.process-dial{display:flex;align-items:baseline;gap:15px;margin-top:38px;width:220px;position:relative;padding-bottom:14px}
.process-dial>span{font:110px/.95 Georgia;color:var(--red);letter-spacing:-7px}.process-dial small{font:15px Georgia;color:#82796a}.process-dial i{position:absolute;bottom:0;left:0;width:100%;height:1px;background:#b5ac98}.process-dial i:after{content:"";position:absolute;inset:0;background:var(--red);transform:scaleX(var(--step-fill,.25));transform-origin:left}
.process-skip{font-size:12px;margin-top:28px}.process-watermark{display:none}.continuum-meter{display:none}
.contact{position:relative;overflow:clip;isolation:isolate}.contact:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,#f5efe2,transparent 60%);z-index:-1}.contact-copy{position:relative}.contact-mark{font-size:200px;line-height:.85;opacity:.2;margin-top:30px;transform-origin:left bottom}.contact #brief-form{background:#f5f0e6;padding:36px;border:1px solid #c3b8a0;box-shadow:12px 15px 0 #c9c0ac66;transform-origin:50% 90%}.contact h2{font-size:clamp(36px,4.1vw,65px)}
/* Pin only where every control fits comfortably; compact screens use flowing reveals. */
.lower-pinned .services{height:240svh;padding:0;background:#f0ece2}
.lower-pinned .services-stage{height:calc(100svh - var(--header));position:sticky;top:var(--header);padding:30px 6% 45px;overflow:clip;perspective:1600px;display:flex;flex-direction:column}
.lower-pinned .section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-shrink:0}.lower-pinned .section-heading .eyebrow{position:absolute;top:29px;left:6%;font-size:9px;margin:0}.lower-pinned .section-heading h2{font-size:clamp(32px,3vw,48px);line-height:1.2;margin-top:28px}.lower-pinned .section-heading>p:last-child{font-size:12px;max-width:370px;padding:0}
.lower-pinned .practice-layout{grid-template-columns:24% 1fr;gap:5%;margin-top:25px;flex:1;min-height:0;align-items:center}
.lower-pinned .service-tabs{align-self:center}.lower-pinned .service-tabs button{padding:25px 12px;gap:16px}.lower-pinned .service-tabs button[aria-selected=true]{background:#e5ddca;border-color:#b5a487}.lower-pinned .service-tabs strong{font-size:24px}.lower-pinned .service-tabs small{font-size:10px}.lower-pinned .tab-num{font-size:12px}
.lower-pinned .demo-shell{height:100%;max-height:510px;display:flex;flex-direction:column;transform-origin:50% 70%;box-shadow:16px 20px 0 #d9d0bc70;background:#f7f3e9}
.lower-pinned .demo-toolbar{font-size:8px;padding:9px 18px;flex-shrink:0}.lower-pinned .demo-panel{min-height:0;flex:1;display:flex}.lower-pinned .website-preview{padding:0;display:flex;flex-direction:column;width:100%;min-height:0}.lower-pinned .sample-brand{padding:13px 25px;flex-shrink:0}.lower-pinned .sample-brand>span:first-child{font-size:25px}.lower-pinned .sample-hero{flex:1;min-height:0;grid-template-columns:1.1fr 1fr}.lower-pinned .sample-hero>div:first-child{padding:22px 30px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.lower-pinned .sample-hero h3{font-size:clamp(28px,2.9vw,43px);line-height:1.3;margin:14px 0}.lower-pinned .sample-hero .eyebrow{font-size:7px;letter-spacing:1px}.lower-pinned .sample-hero p:not(.eyebrow){font-size:11px}.lower-pinned .sample-photo{min-height:0;transform-origin:center;overflow:hidden}.lower-pinned .sample-cta{font-size:11px;margin-top:19px}.lower-pinned .website-preview .preview-answer{padding:12px 25px 5px;margin:0;min-height:0;font-size:10px!important;flex-shrink:0}.lower-pinned .sample-label{padding:0 25px 12px;font-size:8px;flex-shrink:0}
.lower-pinned .service-followup{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:15px;flex-shrink:0}.lower-pinned .service-followup p{font-size:11px}.lower-pinned .service-followup .text-link{font-size:12px}
.lower-pinned .continuum-meter{position:absolute;bottom:12px;left:6%;right:6%;display:flex;gap:25px;align-items:center;font-size:8px;letter-spacing:1.5px;color:#7c7261}.continuum-meter i{height:1px;flex:1;background:#c8bfac;position:relative}.continuum-meter i:after{content:"";position:absolute;inset:0;background:#a33b2d;transform:scaleX(var(--section-progress,0));transform-origin:left}
.lower-pinned .process{height:270svh;padding:0;background:#e5decd}
.lower-pinned .process-stage{position:sticky;top:var(--header);height:calc(100svh - var(--header));padding:8% 7%;grid-template-columns:40% 1fr;gap:8%;align-items:center;overflow:clip;perspective:1600px}
.lower-pinned .process-intro{position:relative;z-index:2}.lower-pinned .process-intro h2{font-size:clamp(38px,4.4vw,70px);line-height:1.3}.lower-pinned .process-intro .eyebrow{font-size:10px}.lower-pinned .process-intro>p{font-size:14px}.lower-pinned .process-dial{margin-top:30px}.lower-pinned .process-list{position:relative;height:350px;isolation:isolate;perspective:1400px}
.lower-pinned .process-list li{position:absolute;inset:0;padding:40px;border:1px solid #bdb098;background:#f8f3e6;box-shadow:5px 20px 45px #53453125;display:flex;flex-direction:column;justify-content:space-between;gap:20px;transform-origin:50% 85%}
.lower-pinned .process-list li>span{font:18px Georgia;color:#a43d2d;border-bottom:1px solid #c8bdab;padding:0 0 15px}.lower-pinned .process-list li>span:after{content:" / R STUDIO — PROJECT NOTES";font:8px var(--sans);letter-spacing:1.7px;margin-left:20px;color:#8b7c66}.lower-pinned .process-list h3{font-size:clamp(27px,3vw,43px);line-height:1.4}.lower-pinned .process-list p{font-size:14px;line-height:1.9;margin:18px 0}.lower-pinned .process-list small{font-size:10px}.lower-pinned .process-watermark{display:block;position:absolute;left:6%;bottom:0;font:clamp(90px,12vw,190px)/1.1 var(--serif);white-space:nowrap;color:#c4b89c55;pointer-events:none;z-index:-1}
.motion-on .faq-list details{position:relative}.motion-on .faq-list details:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background:#a33b2d;transform:scaleX(var(--faq-line,0));transform-origin:left;pointer-events:none}
@media(min-width:1000px) and (max-height:800px){.lower-pinned .services-stage{padding-top:24px}.lower-pinned .section-heading .eyebrow{top:20px}.lower-pinned .section-heading h2{font-size:32px}.lower-pinned .section-heading>p:last-child{font-size:10px}.lower-pinned .practice-layout{margin-top:18px}.lower-pinned .service-tabs button{padding:20px 8px}.lower-pinned .service-tabs strong{font-size:20px}.lower-pinned .sample-hero>div:first-child{padding:15px 22px}.lower-pinned .sample-hero h3{font-size:30px;margin:11px 0}.lower-pinned .sample-cta{margin-top:12px}.lower-pinned .process-stage{padding-top:4%;padding-bottom:4%}.lower-pinned .process-list{height:325px}.lower-pinned .process-list li{padding:30px}.lower-pinned .process-intro h2{font-size:44px}.lower-pinned .process-dial>span{font-size:90px}}
@media(max-width:999px){.process-stage{grid-template-columns:1fr;gap:45px}.process-intro{position:relative}.process-dial{position:absolute;right:0;bottom:15px;width:145px}.process-dial>span{font-size:85px}.process-skip{margin-top:20px}.process-list{display:grid;gap:22px}.process-list li{background:#f8f3e7;border:1px solid #c3b9a5;box-shadow:5px 8px 0 #d4c9b480;padding:30px;gap:20px}.process-list li>span{font-size:23px}.process-list h3{font-size:28px}.contact{gap:7%}.contact #brief-form{padding:27px}.contact-mark{font-size:160px}}
@media(max-width:600px){.process-dial{position:relative;bottom:auto;margin-top:25px;width:160px}.process-dial>span{font-size:75px}.process-stage{gap:30px}.process-list li{padding:24px 20px;gap:15px}.process-list h3{font-size:23px}.process-list p{font-size:12px}.process-list small{font-size:9px}.contact #brief-form{padding:23px 20px;box-shadow:7px 8px 0 #c9c0ac66}.contact-mark{font-size:130px;margin-top:20px}.contact h2{font-size:32px}.contact{gap:35px}.process-skip{margin-top:20px}.faq-list summary{font-size:14px}}
/* Keyboard focus always exposes the complete control, even during an entrance. */
.motion-on #brief-form:focus-within{transform:none!important;opacity:1!important}
html:not(.motion-on) .process-dial{display:none}
@media(max-width:999px) and (min-height:541px){.motion-on .process-list{gap:65px;padding-bottom:25px}.motion-on .process-list li{position:sticky;top:calc(var(--header) + 20px);min-height:220px;align-self:start;z-index:1}.motion-on .process-list li:nth-child(2){top:calc(var(--header) + 30px);z-index:2}.motion-on .process-list li:nth-child(3){top:calc(var(--header) + 40px);z-index:3}.motion-on .process-list li:nth-child(4){top:calc(var(--header) + 50px);z-index:4}}
.process-list h3{text-wrap:balance}.process-list p,.faq-list p,.contact-copy h2{text-wrap:pretty}
@media(max-width:360px){.process-list h3{font-size:21px}.process-list li{padding:22px 17px;gap:12px}.contact h2{font-size:28px}.contact #brief-form{padding:22px 16px}.contact select,.contact textarea{font-size:12px}.contact .form-note{font-size:10px}}